jQuery slider for div elements not just images

Question

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>

Solution 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.

Solution 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/