div元素的jQuery滑块不只是图像 [英] jQuery slider for div elements not just images

问题描述

我已在此页面底部为正在处理的某些建议项目创建了div和容器，希望将其作为滑块，在其中单击左右即可查看更多内容。但是我见过的所有jQuery滑块仅适用于图像（轮播），对于这种情况，有人会向我推荐，因为它不仅仅是图像。

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.

我想我不能在UL元素中包含DIV，因为这是我所见过的所有滑块的用途。

I presumed I cannot have DIV's inside of UL elements as that's what all the sliders I've seen use.

这是我下面的滑块区域的html。以及指向页面的链接： http://bit.ly/18IOB8J

Here is my html for that slider area below. And a link to the page: 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>&#163; 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>&#163; 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>&#163; 59.99</p>
                     </div>
                 </div><!-- suggestedproduct-container -->
                 <div id="carousel-right"><a href="#"><img src="http://placehold.it/20x100" /></a></div>

推荐答案

我发现 Basic Slider 是最好的，最容易集成的滑块脚本之一。重量很轻，具有所有必需的选项：

I found Basic Slider to be one of the best and easiest slider scripts to integrate out there. Very light weight, has all the needed options:

• 它可以滑动图像和或HTML内容


• 反应灵敏


• 提供漂亮的键盘，鼠标和滚轮控件


• 非常容易集成和自定义


• 淡入淡出或幻灯片过渡


• 定时选项，控制显示选项，...

• 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, ...

它替换了我正在使用的所有其他滑块脚本，因为它非常易于集成和自定义并且非常轻巧，并且奖金提供了很好的淡入淡出效果。

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.

这篇关于div元素的jQuery滑块不只是图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！