设置显示Flex Slider轮播图像的数量

Question

我在我的网站上嵌入了带有旋转木马的flex滑块.但是,我没有很好地设置滑块的属性(或者可能是CSS),就像这样.http://www.screencast.com/t/xlRssnj43旋转木马的最后一张图片显示了一半.

虽然我可以点击它,理想情况下我希望它是这样的:http://www.screencast.com/t/NfOlZdUMQh有下一个/上一个按钮显示所有的时间,并有4个完整的图像显示.第五张应该在下一张幻灯片上.

这是我的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>

这是我的jquery代码:

$('.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"
                  });


        }

我还把它放在一个演示页面中:http://ultimatetemplate.businesscatalyst.com/slider

有任何想法吗？干杯.

Answer 1

你覆盖了flexslider css,这就是为什么你的旋转木马箭头越界并且图像也在切割.为了让你对flexslider有点了解=>这个itemwd是li wd而不是图像..而itemmargin是用户设置为css并需要在滑动时考虑的边距.因此,如果你的img是91px并且页边距设置为li 10px(每侧左/右)比itemwd应该是91 + 10 +10 = 111你需要设置这些@ 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 */
 }

并且你希望箭头离开旋转木马而不是删除溢出隐藏所以它们可以看到.. @ 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;
   }

@这些是你已经在做的..

 #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级做这些改变..

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

工作演示