Html 用于 div 元素的 jQuery 滑块不仅仅是图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19723835/
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
jQuery slider for div elements not just images
提问by wharfdale
I have created the divs and containers for some 'suggested items' at the bottom of this page im working on, would like it to be a slider where you click left and right to see more. But all jQuery sliders i've seen only work for images only (carousels), is there ones people could recommend for to me for this situation as it's not just images.
我已经在我正在处理的本页面底部为一些“建议项目”创建了 div 和容器，希望它是一个滑块，您可以在其中单击左右以查看更多内容。但是我见过的所有 jQuery 滑块都只适用于图像（轮播），是否有人可以向我推荐这种情况，因为它不仅仅是图像。
I presumed I cannot have DIV's inside of UL elements as that's what all the sliders I've seen use.
我认为我不能在 UL 元素中包含 DIV，因为这就是我见过的所有滑块所使用的。
Here is my html for that slider area below. And a link to the page: http://bit.ly/18IOB8J
这是我下面那个滑块区域的 html。以及页面链接：http: //bit.ly/18IOB8J
<div id="carousel-left"><a href="#"><img src="http://placehold.it/20x100" /></a></div>
<div id="suggestedproducts">
<div id="suggestedproduct-container">
<div id="suggestedproduct-img">
<a href="#"><img src="http://acsupply.mangdevelopment.co.uk/upload/category/5_FixingsHardwareSecurity.jpg" /></a>
</div>
<div id="suggestedproduct-desc">
<a href="#"><h5>JCB 650W ELECTRIC JIGSAW</h5></a>
<p>£ 59.99</p>
</div>
</div>
<div id="suggestedproduct-container">
<div id="suggestedproduct-img">
<div id="suggestedproduct-img">
<a href="#"><img src="http://acsupply.mangdevelopment.co.uk/upload/category/5_FixingsHardwareSecurity.jpg" /></a>
</div>
</div>
<div id="suggestedproduct-desc">
<a href="#"><h5>JCB 650W ELECTRIC JIGSAW</h5></a>
<p>£ 59.99</p>
</div>
</div>
<div id="suggestedproduct-container">
<div id="suggestedproduct-img">
<a href="#"><img src="http://acsupply.mangdevelopment.co.uk/upload/category/5_FixingsHardwareSecurity.jpg" /></a>
</div>
<div id="suggestedproduct-desc">
<a href="#"><h5>JCB 650W ELECTRIC JIGSAW</h5></a>
<p>£ 59.99</p>
</div>
</div><!-- suggestedproduct-container -->
<div id="carousel-right"><a href="#"><img src="http://placehold.it/20x100" /></a></div>
回答by Primoz Rome
I found Basic Sliderto be one of the best and easiest slider scripts to integrate out there. Very light weight, has all the needed options:
我发现Basic Slider是最好和最容易集成的滑块脚本之一。重量非常轻，具有所有需要的选项：
- It can slide images and or HTML content
- It's responsive
- Offers nice keyboard, mouse and scroll wheel controls
- Very easy to integrate and customize
- Fade or slide transitions
- Timing options, control display options, ...
- 它可以滑动图像和/或 HTML 内容
- 它是响应式的
- 提供漂亮的键盘、鼠标和滚轮控制
- 非常容易集成和定制
- 淡入淡出或幻灯片过渡
- 定时选项、控制显示选项、...
It replaced all other slider scripts I was using because it's very easy to integrate and customize and very light-weight and for bonus offers nice fade effect.
它取代了我正在使用的所有其他滑块脚本，因为它非常容易集成和定制，而且非常轻巧，而且还提供了不错的淡入淡出效果。
回答by Joran Den Houting
There are MANY jQuery sliders supporting all kind's of content. One of them I've used many times is http://tympanus.net/Development/CircularContentCarousel/
有许多 jQuery 滑块支持所有类型的内容。我用过很多次的其中之一是http://tympanus.net/Development/CircularContentCarousel/
Source and tutorial can be found at http://tympanus.net/codrops/2011/08/16/circular-content-carousel/
来源和教程可以在http://tympanus.net/codrops/2011/08/16/circular-content-carousel/找到
