用于 div 元素的 jQuery 滑块，而不仅仅是图像

2022-01-24 00:00:00 slider html carousel

我在此页面底部为我正在处理的一些建议项目"创建了 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 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.

相关文章