Set the amount of displaying Flex Slider carousel image

css, flexslider, jquery

Solution

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

Problem

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.

Original source