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

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

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

这是我的HTML:

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

有任何想法吗? 干杯。

你覆盖了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' }); 

工作演示

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

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

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

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

导航的宽度必须是

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内的箭头 – 请执行以下操作:

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

由于滑块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 {margin-right:29px; }