Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    RedPlugDesign
    @RedPlugDesign

    I have been implementing Flexslider on a few sites, and always enjoy the functionality. Currently, I am using it to slide text, not images. Each slide varies in height due to the amount of text. I have added smoothHeight, which will work, but I was hoping to find a way to dynamically equalize height and stay responsive if the page is resized during viewing.

    I read: woothemes/FlexSlider#174, but cannot get it to work with the current version. Any ideas or support available?​

    Tyler Smith
    @tylerxo
    hey @RedPlugDesign, do you have a link of your existing example?
    RedPlugDesign
    @RedPlugDesign

    <script src="http://www.redplugdesign.com/templates/redplugdesign/javascript/jquery.flexslider-min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <!-- Place somewhere in the <body> of your page -->

    <div class="flexslider">
    <ul class="slides">
    <li style="background:url(<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($responsive_img); ?>) no-repeat center center">
    <div class="wrapper">
    <div class="left" style="border-color:<?php echo $this->params->get('responsive_color');?>">
    <h1 style="color:<?php echo $this->params->get('responsive_color');?>"><?php echo htmlspecialchars($responsive_h1); ?></h1>
    <p style="color:<?php echo $this->params->get('responsive_color');?>"><?php echo htmlspecialchars($responsive_h1_p); ?></p>
    <h3 style="color:<?php echo $this->params->get('responsive_color');?>"><?php echo htmlspecialchars($responsive_h3); ?></h3>
    <p style="color:<?php echo $this->params->get('responsive_color');?>"><?php echo htmlspecialchars($responsive_h3_p); ?></p>
    <a class="starthere" href="<?php echo $this->params->get('responsive_link');?>" title="<?php echo htmlspecialchars($responsive_h2); ?>">See More</a>
    </div>
    <div class="right" style="border-color:<?php echo $this->params->get('responsive_color');?>">
    <img src="<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($responsive_logo); ?>" alt="<?php echo htmlspecialchars($responsive_h1); ?>"/>
    <ul>
    <li><span style="color:<?php echo $this->params->get('responsive_color');?>">Review:</span><a href="<?php echo $this->params->get('responsive_url');?>" title="Visit <?php echo $this->params->get('responsive_url');?>" target="_blank" style="color:<?php echo $this->params->get('responsive_color');?>">Click Here</a></li>
    <li style="color:<?php echo $this->params->get('responsive_color');?>"><span style="color:<?php echo $this->params->get('responsive_color');?>">CMS:</span><?php echo htmlspecialchars($responsive_cms); ?></li>
    <li style="color:<?php echo $this->params->get('responsive_color');?>"><span style="color:<?php echo $this->params->get('responsive_color');?>">Features:</span><?php echo htmlspecialchars($responsive_features); ?></li>
    </ul>
    </div>
    </div>
    </li>
    <li style="background:url(<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($ecommerce_img); ?>) no-repeat center center">
    <div class="wrapper">
    <div class="left" style="border-color:<?php echo $this->params->get('ecommerce_color');?>">
    <h2 style="color:<?php echo $this->params->get('ecommerce_color');?>"><?php echo htmlspecialchars($ecommerce_h2); ?></h2>
    <p style="color:<?php echo $this->params->get('ecommerce_color');?>"><?php echo htmlspecialchars($ecommerce_h2_p); ?></p>
    <h3 style="color:<?php echo $this->params->get('ecommerce_color');?>"><?php echo htmlspecialchars($ecommerce_h3); ?></h3>
    <p style="color:<?php echo $this->params->get('ecommerce_color');?>"><?php echo htmlspecialchars($ecommerce_h3_p); ?></p>
    <a class="starthere" href="<?php echo $this->params->get('ecommerce_link');?>" title="<?php echo htmlspecialchars($ecommerce_h2); ?>">See More</a>
    </div>
    <div class="right">
    <img src="<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($ecommerce_logo); ?>" alt="<?php echo htmlspecialchars($ecommerce_h2); ?>"/>
    <ul>
    <li><span style="color:<?php echo $this->params->get('ecommerce_color');?>">Review:</span><a href="<?php echo $this->params->get('ecommerce_url');?>" title="Visit <?php echo $this->params->get('ecommerce_url');?>" target="_blank" style="color:<?php echo $this->params->get('ecommerce_color');?>">Click Here</a></li>

    .flex-viewport,.flex-control-thumbs li{}
    .flex-viewport:hover,.flex-control-thumbs li:hover{}
    .flex-viewport { max-height:2000px; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; }
    .loading .flex-viewport { max-height:300px; }
    .flexslider .slides { zoom:1; }
    .slides:after {content:"\0020"; display:block; clear:both; visibility:hidden; line-height:0; height:0}
    html[xmlns] .slides {display:block}

    • html .slides {height:1%}
      .flexslider img{height:auto;width:98%}
      .flexslider ul.slides > li{min-height:300px}
      .flexslider ul li{display:none;-webkit-backface-visibility:hidden;position:relative}
      .flexslider ul li .left{border-right:1px solid #fff;float:left;margin:40px 0;padding:0 2.08%/20px/ 0 1.04%/10px/;width:62.5%/600px/}
      .flexslider ul li h1,.flexslider ul li h2{font:36px/1em 'ArvoRegular',Arial,Helvetica,sans-serif}
      .flexslider ul li h1,.flexslider ul li h2,.flexslider ul li h3{margin:0 0 4px;text-align:left}
      .flexslider ul li p{line-height:1.25em}
      .flexslider ul li .right{float:right;margin:40px 0;padding:0 1.04%/10px/ 0 0;width:31.25%/300px/}
      .flexslider ul li .right li{display:block;padding:0}
      .flexslider ul li .right img{display:block;margin:0 auto;max-width:400px}
      .flexslider ul li .right li span{font:bold 14px Arial,Helvetica,sans-serif;padding:0 4px 0 0}

    .flexslider-thumbs ol.slides{width:100% !important}
    .flexslider-thumbs ol li{display:inline-block;margin:1.5% 1.04%/10px/ 30px;position:relative;width:31.25% /300px/ !important}
    .flexslider-thumbs ol li img,.flexslider-thumbs ol li{cursor:pointer;-webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;width:100%}
    span.flex-caption{bottom:0;font:16px/1em Arial,Helvetica,sans-serif;height:1em;left:0;margin:auto;position:absolute;right:0;text-align:center;top:0}
    .no-js .slides > li:first-child {display:block}

    $(window).load(function() {
    // The slider being synced must be initialized first
    $('.flexslider-thumbs').flexslider({
    animation: "slide",
    animationLoop: false,
    controlNav: false,
    directionNav: false,
    slideshow: false,
    asNavFor: '.flexslider'
    });

    $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    controlNav: false,
    directionNav: false,
    smoothHeight: true,
    slideshow: false,
    sync: ".flexslider-thumbs"
    });
    });

    I removed the equal height code from the link in the original post since i am not even sure it works for FS2
    Tyler Smith
    @tylerxo
    @RedPlugDesign smoothHeight should behave just like you described. After smoothHeight animates the container, it sets the height back to auto. I'm not sure what you're seeing.
    RedPlugDesign
    @RedPlugDesign
    My bad, i had a minimum height set, i have since commented out. You can now see that height of each slide adjusts. On a large screen, min-height is fine, but on smaller screens it will not even out. I am looking for a way to make each slide an equal height, even when resized, ie going from holding a mobile device vertically to horizontally
    Tyler Smith
    @tylerxo
    If you want all slides to be the same height, that would be the natural behavior for the slider animation. So, smoothHeight would just be removed, or set to false. If you are wanting them to be the same height, then you don't need height animation between slides anyway. :) @RedPlugDesign
    RedPlugDesign
    @RedPlugDesign

    I am not explaining well. Yes, the slides are the same height without smoothHeight, but the content is not.

    <div class="wrapper flexslider-thumbs">
    <div class="flex-viewport" style="overflow: hidden; position: relative;">
    <ul class="slides">
    <li>
    <div class="wrapper">
    <div class="left">
    <h1></h1>
    <p></p>
    <h3></h3>
    <p></p>
    <a></a>
    </div>
    </div>
    <div class="right">
    <a><img/></a>
    <ul>
    <li><span></span></li>
    </ul>
    </div>
    </ul>
    </div>
    </div>

    I need .left & .right to be the same height on all the slides. I have tried equal height JQuery, but nothing works well, and breaks on resize.

    Tom Cavill
    @cavill
    Does anyone know of a fix for issue #787?
    Vladimir Rodríguez
    @fizzvr
    nice!
    mykg4orce
    @mykg4orce
    hello
    woo
    Rian Ariona
    @ariona
    hello there?
    David Sahlström
    @soulstyle
    Hi Woo!
    David Sahlström
    @soulstyle

    I'm using FlexSlider on a lot of my sites and it usually works very well - Thanks a lot!

    This time I'm trying to set up a vertical slider and it doesn't really behave as I expect.. I know the functionality is limited for vertical sliders. I followed the docs few mentions about vertical - each item have to be fixed height, no carousel, etc. The problem is, the slider never stops scrolling even when it reaches the botom of the <ul>. It just continues - only showing white space.

    How do I get around this? Is this a know issue? Couldn't find any info about it Googling for 45min.

    Thanks, David

    Philip Morkisch
    @Webastronaut
    What about tryin Slick for your purpose (sorry woothemes)? It has a "vertical" option for sliders. Check: http://kenwheeler.github.io/slick/
    Jeffrey Pearce
    @jeffikus
    Hi everyone, just letting you know that I am now currently working on the FlexSlider project. I've started by pushing out a fix for the Page Visibility API and have packaged the 2.3.0 branch for release. I'll be fixing more issues and closing unnecessary issues as well over the course of the next few weeks! :smile: looking forward to making it even more awesome!
    Jeffrey Pearce
    @jeffikus
    Also, bear with me as I get up to speed, there's a lot of ground to cover :)
    David Hudson
    @hudsonfoo
    Does anyone know if there's an event listener for FlexSlider so I can run code after a slide motion is completed?
    Tyler Smith
    @tylerxo
    @hudsonfoo you have access to before, after, and end (end of slides) hooks https://github.com/woothemes/FlexSlider/blob/master/jquery.flexslider.js#L1139
    Caspert
    @Caspert
    Hi guys, I came from the github site of the flex slider to this chat. I was wondering if you can change the position of the "flex-direction-nav” before the ol of “flex-control-nav flex-control-thumbs”? Is this possible to change the position of the generated HTML?
    Tyler Smith
    @tylerxo
    @Caspert If you can't use CSS to position the elements the way you'd like, you could use the start function to re-order the elements once the slider is initiatied
    Derrick Hammer
    @pcfreak30
    Does anyone not seem to care about merging the bower prs to the main repo? Im having to fork it for an app due to it still not being present..
    Jeffrey Pearce
    @jeffikus
    Hi everyone, an announcement regarding FlexSliders future development and existing GitHub Issues -> http://develop.woothemes.com/flexslider/2015/03/18/flexslider-future-forecasting/ also, we will be using this blog going forward for any announcements about the library!
    Tyler Smith
    @tylerxo
    @jeffikus nice! :)
    Victor M Ruiz
    @Victor89ruiz
    Hi everyone I been Love the new updates with flex slider. My question is I'm targeting the slider url from the homepage to direct me to that specific slider. It takes me to the slide but the icons underneath don't match the slider on top.
    This is what I have for the js:
    var index = 0, hash = window.location.hash;
    if (hash) {
        index = /\d+/.exec(hash)[0];
        index = (parseInt(index) || 1) - 1;
    }
    
    $("#peopleslider").flexslider({
    
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        directionNav: false,
    
        startAt: index, //now foo.html#3 will load item 3
        after:function(slider){
            window.location.hash = slider.currentSlide+1;
            //now when you navigate, your location updates in the URL
        }
    });
    
    $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
    
        prevText: "<i class='fa fa-caret-left fa-lg'></i>",
        nextText: "<i class='fa fa-caret-right fa-lg'></i>",
    
        itemWidth: 175,
        itemMargin: 0,
        minItems: 1,
        maxItems: 5,
    
        asNavFor: '#peopleslider'
    
    });
    How do I link the #peopleslider to #carousel if I add the sync function it breaks it. Any thoughts??
    Heidi Jermyn
    @heidipj
    Hi all, has anyone managed to come with a solution to putting the thumbnail navigation to the right hand side of the slider show? I have tried with css but not getting too far - is it possible?
    Tyler Smith
    @tylerxo
    @heidipj that might be most dependent on whether your thumbnail navigation needs to slide/scroll as well. if it doesn't need to slide, that should be definitely possible through a mixture of absolute positioning and padding on your slider container.
    Heidi Jermyn
    @heidipj
    Hi @mbmufffin :) Thumnail navigation will have a restricted number of items - so need need for that bit to scroll. I am not a complete idiot when it comes to CSS - but I'd been tweaking it and wasn't getting anywhere with it. I wondered if anyone had actually achieved it...
    Tyler Smith
    @tylerxo
    @heidipj hi :) if you can muster a jsfiddle to show me whereabouts you're at with the code, I could poke at it.
    jinleileiking
    @jinleileiking
    hi, can flexslider add some text at the pic ?
    Heidi Jermyn
    @heidipj
    @mbmufffin thanks for offer of help - I've decided to go a different route :)
    Mochamad Iqbal Dwi Cahyo
    @mochadwi

    there's a bug that check the .flexslider container width instead .flex-viewport

    if someone try to customize the .flex-viewport manually (custom width)
    the default viewport just check the .flexslider width, not the .flex-viewport

    e.g:
    .flexslider = 953
    .flex-viewport = 289

    transform: translate3d(-289px, 0px, 0px)

    Jeffrey Pearce
    @jeffikus
    Hi guys, just letting you know I'm on leave for a week -> http://develop.woothemes.com/flexslider/2015/04/24/flexslider-milestone-2-5-0-update/
    Mochamad Iqbal Dwi Cahyo
    @mochadwi

    hello guys, any thought how to hide flex-prev on the first slide / flex-next on the last slide?

    I'm using start() callback, it worked. but it didn't going well when I did this:

    first slide (the flex-prev is gone :smile: ) -> click next -> and then, click prev (the flex-prev is there)

    Benedikt Gregor
    @scsskid
    why not by using the assigned css .flex-disabled ?
    Vassil Vassilev
    @vgvassilev
    Hi, I'd like to disable flexslider mouse wheel events until it gets clicked on. Is that possible?