Set the amount of displaying Flex Slider carousel image

问题

I embed flex slider with carousel on my site. However, I did not set the property of the slider well(or might be CSS) that it is like this. http://www.screencast.com/t/xlRssnj43 The last image of the carousel is half shown.

Although I can click on it, ideally I would like it to be this: http://www.screencast.com/t/NfOlZdUMQh Having next/previous button showing all the time, and having 4 full images showing. The 5th one should be on the next slide.

Here is my HTML:

<div class="slider">
    <div class="flexslider" id="slider">
    <ul class="slides">
        <li><img src="image1.jpg" /></li>
        <li><img src="image2.jpg" /></li>
        <li><img src="image3.jpg" /></li>
        <li><img src="image4.jpg" /></li>
        <li><img src="image5.jpg" /></li>
    </ul>
    </div>
    <!--flexslider-->
    <div class="flexslider" id="carousel">
    <ul class="slides">
        <li><img src="image1.jpg" /></li>
        <li><img src="image2.jpg" /></li>
        <li><img src="image3.jpg" /></li>
        <li><img src="image4.jpg" /></li>
        <li><img src="image5.jpg" /></li>
    </ul>
    </div>
    <!--flexslider-->
    </div>

Here is my jquery code:

$('.flexslider').each(function() {
                var $root = $(this);

                // kill item if no image
                $root.find("li").each(function(){
                    var src = $(this).find("img").attr("src");
                    if(!src){
                        $(this).remove();
                    }
                });
                });
                $('#carousel').flexslider({
                    animation: "slide",
                    controlNav: false,
                    animationLoop: false,
                    slideshow: false,
                    itemWidth: 91,
                    itemMargin: 19,  //this seems like not working, I also set in css
                    asNavFor: '#slider',
                    minItems: 4
                  });

                  $('#slider').flexslider({
                    animation: "slide",
                    controlNav: false,
                    animationLoop: false,
                    slideshow: false,
                    sync: "#carousel"
                  });


        }

I have also put it in a demo page: http://ultimatetemplate.businesscatalyst.com/slider

Any ideas? Cheers.

回答1:

You were overwriting the flexslider css thats why your carousel arrow going out of bound and also image is cutting. To give you bit understanding of flexslider => this itemwd is the li wd not the image .. and itemmargin is the margin which user set into css and require to consider while sliding. So if your img is 91px and margin are set to li 10px(each side left/right) than itemwd should be 91+10 +10 = 111 and u need to set these @ screen.css

#carousel .flex-viewport img {width:91px;}
#carousel .flex-viewport li{
margin:1px 5px 1px  5px;
  /*these are margins which u mention in the  itemMargin at js */
 }

And you want that arrows goes out of carousel than remove overflow hidden so they can visible.. @screen.css

   #carousel.flexslider {
   height: 65px; 
   border:0;
   box-shadow:none;
   border-radius:0;
   /*overflow:hidden;*/ /*remove this its hiding ur arrows  next/prev*/
    margin-left:0;margin-right:0;
   }

@and these are u already doing..

 #carousel .flex-direction-nav .flex-prev { left: 0 !important; opacity: 1 !important; 
  margin-left:-30px; } /*this 30 px are wd of next/prev */


 #carousel .flex-direction-nav .flex-next { right: 0 !important;  
   opacity: 1 !important; margin-right:-30px;} /*this 30 px are wd of next/prev */

@JS level do these changes ..

 $('#carousel').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                itemWidth: 111,
                itemMargin: 10,  
                asNavFor: '#slider'                    
              });

Working demo

回答2:

Do you know the width of the parent element for the thumbnails? In that case, you could simply set the thumbnails to a fixed width.

So, if the thumbnail parent is 600px wide,

$('.flexslider').flexslider({
  itemWidth: 180,
  itemMargin: 10,
});

should ensure that only four full thumbnails are visible at any time.

回答3:

Width of the nav has to be

CSS

 #slider .flex-next, #slider .flex-prev{
    display:none;
 }
 #carousel .flex-viewport{
    margin: 0 40px;
 }

Example: http://jsfiddle.net/47rf6/1/

Also, In the JS

$('.flexslider').flexslider({
  itemWidth: 99,
  itemMargin: 19,
});

Now the calculation part: Parent Element = 472px Hence Thumbnail's = ( width: 99 + Margin = 19px ) * 4(number of thumbnails to display) = 472px.

Also, If you want the arrow's inside the thumbnail div - do this:

Then example doesn't contain margin. But I am guessing you get the idea. Also, the images are not even hence not evenly divided. The flexslider is not responsive. Meaning if you try to do the same thing on their slide it doesn't work. There are many other carousel freely available who do these things by default, so you don't have to customized this one. You can still customized it if we know what's going on in your code exactly. NOTE: All the thumbnails has to be of same size.

回答4:

Since your width of the slider div is 472px so use this settings

$('#carousel').flexslider({
   animation: "slide",
   controlNav: false,
   animationLoop: false,
   slideshow: false,
   itemWidth: 91, 
   itemMargin: 29,  //this should be 29px in your case
   asNavFor: '#slid2r',
   minItems: 4
});

If you are using itemwidth:91 then your itemMargin should be 29px. Then it should show only four thumnails and filth one ame in the next slide.

So use this in css as
#carousel .flex-viewport li{ margin-right:29px; }

来源：https://stackoverflow.com/questions/20415736/set-the-amount-of-displaying-flex-slider-carousel-image

标签

jquery

css

flexslider