jquery - 设置Flex Slider轮播图片的显示量

Question

我在我的网站上嵌入了带有轮播的柔性 slider 。但是，我没有很好地设置 slider 的属性(或者可能是CSS)，它是这样的。 http://www.screencast.com/t/xlRssnj43轮播的最后一个图像显示了一半。

虽然我可以点击它，但理想情况下我希望它是这样的:http://www.screencast.com/t/NfOlZdUMQh始终显示下一个/上一个按钮，并显示 4 个完整图像。第 5 个应该位于下一张幻灯片上。

这是我的 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 有所了解，而不是图像.. 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'                    
              });

Working demo