jQuery 设置显示 Flex Slider 轮播图像的数量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20415736/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set the amount of displaying Flex Slider carousel image
提问by Alex
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/xlRssnj43The last image of the carousel is half shown.
我在我的网站上嵌入了带有轮播的 flex 滑块。但是，我没有很好地设置滑块的属性（或者可能是CSS），它是这样的。http://www.screencast.com/t/xlRssnj43轮播的最后一张图片显示了一半。
Although I can click on it, ideally I would like it to be this: http://www.screencast.com/t/NfOlZdUMQhHaving next/previous button showing all the time, and having 4 full images showing. The 5th one should be on the next slide.
虽然我可以点击它，但理想情况下我希望它是这样的：http://www.screencast.com/t/NfOlZdUMQh始终显示下一个/上一个按钮，并显示 4 个完整图像。第 5 个应该在下一张幻灯片上。
Here is my HTML:
这是我的 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:
这是我的 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"
});
}
I have also put it in a demo page: http://ultimatetemplate.businesscatalyst.com/slider
我也把它放在了一个演示页面：http: //ultimatetemplate.businesscatalyst.com/slider
Any ideas? Cheers.
有任何想法吗？干杯。
回答by Neha
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
您正在覆盖 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 */
}
And you want that arrows goes out of carousel than remove overflow hidden so they can visible.. @screen.css
并且您希望箭头离开轮播而不是删除隐藏的溢出以便它们可见[email protected]
#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 ..
@JS 级别做这些改变..
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 111,
itemMargin: 10,
asNavFor: '#slider'
});
回答by janfoeh
Do you know the width of the parent element for the thumbnails? In that case, you could simply set the thumbnails to a fixed width.
你知道缩略图的父元素的宽度吗？在这种情况下，您可以简单地将缩略图设置为固定宽度。
So, if the thumbnail parent is 600px wide,
因此，如果缩略图父级为 600 像素宽，
$('.flexslider').flexslider({
itemWidth: 180,
itemMargin: 10,
});
should ensure that only four full thumbnails are visible at any time.
应确保任何时候只有四个完整的缩略图可见。
回答by Ani
Width of the nav has to be
导航的宽度必须是
CSS
CSS
#slider .flex-next, #slider .flex-prev{
display:none;
}
#carousel .flex-viewport{
margin: 0 40px;
}
Example: http://jsfiddle.net/47rf6/1/
示例：http: //jsfiddle.net/47rf6/1/
Also, In the JS
此外，在JS
$('.flexslider').flexslider({
itemWidth: 99,
itemMargin: 19,
});
Now the calculation part: Parent Element = 472pxHence Thumbnail's = ( width: 99+ Margin = 19px) * 4(number of thumbnails to display) = 472px.
现在计算部分：Parent Element = 472px因此 Thumbnail's = ( width: 99+ Margin = 19px) * 4(要显示的缩略图数量) = 472px。
Also, If you want the arrow's inside the thumbnail div - do this:
另外，如果您希望箭头位于缩略图 div 内 - 执行以下操作：
Then example doesn't contain margin. But I am guessing you get the idea. Also, the images are not even hence not evenly divided. The flexslider is not responsive. Meaning if you try to do the same thing on their slide it doesn't work. There are many other carousel freely available who do these things by default, so you don't have to customized this one. You can still customized it if we know what's going on in your code exactly. NOTE: All the thumbnails has to be of same size.
那么示例不包含边距。但我猜你明白了。此外，图像甚至不是均匀划分的。flexslider 没有响应。意思是如果你试图在他们的幻灯片上做同样的事情是行不通的。默认情况下，还有许多其他免费提供的轮播会执行这些操作，因此您不必自定义此轮播。如果我们确切地知道您的代码中发生了什么，您仍然可以对其进行自定义。注意：所有缩略图的大小必须相同。
回答by ramchauhan
Since your width of the slider div is 472px so use this settings
由于滑块 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
});
If you are using itemwidth:91 then your itemMargin should be 29px. Then it should show only four thumnails and filth one ame in the next slide.
如果您使用的是 itemwidth:91，那么您的 itemMargin 应该是 29px。然后它应该只显示四个缩略图，并在下一张幻灯片中显示一个 ame。
So use this in css as
#carousel .flex-viewport li{
margin-right:29px;
}
所以在 css 中使用它作为
#carousel .flex-viewport li{ margin-right:29px; }
