jQuery slider for div elements not just images

问题

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.

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

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>

回答1:

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:

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.

回答2:

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/

Source and tutorial can be found at http://tympanus.net/codrops/2011/08/16/circular-content-carousel/

来源：https://stackoverflow.com/questions/19723835/jquery-slider-for-div-elements-not-just-images

标签

html

slider

carousel