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 =＆gt;这个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'                    
              });

Working demo

Answer 2

您知道缩略图的父元素的宽度吗？在这种情况下，您只需将缩略图设置为固定宽度。

因此，如果缩略图父级是600px宽，

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

应确保在任何时候只能看到四个完整的缩略图。

Answer 3

导航的宽度必须是

<强> CSS

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

示例：http://jsfiddle.net/47rf6/1/

此外，在 JS

中

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

现在计算部分：Parent Element = 472px 因此缩略图=（width: 99 + Margin = 19px）* 4（要显示的缩略图数量）= 472px。

此外，如果您想在缩略图div中使用箭头 - 请执行以下操作：

然后示例不包含保证金。但我猜你得到了这个想法。而且，图像甚至不均匀分割。柔性滑板没有响应。意思是如果你试图在他们的幻灯片上做同样的事情它不起作用。还有许多其他可自由使用的旋转木马默认执行这些操作，因此您无需自定义此旋转木马。如果我们确切知道您的代码中发生了什么，您仍然可以自定义它。注意：所有缩略图必须大小相同。

Answer 4

由于滑块div的宽度为472px，因此请使用此设置

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

如果你使用的是itemwidth：91那么你的itemMargin应该是29px。然后它应该只显示四个thumnails并在下一张幻灯片中填充一个ame。

所以在CSS中使用它作为
#carousel .flex-viewport li { 保证金权：29px; }

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

4 个答案: