Unrestricted Content

The Content Slider (or jQuery Slider if using the jQuery version) allows you to easily animate any series of elements, by sequentially scrolling them.

The content can be anything: HTML, text, images, ...

Accommodate Non-image Content

Menucool Content Slider allows you to organize, highlight and showcase your most important content in a sleek and stylish manner while at the same time allowing your audience to browse the content all within the same page.

Easy to Customize

The options in the script allows you to easily cutomize the slider to your web design. No muss, no fuss.

  • direction
  • scroll interval
  • scroll duration
  • hover pause
  • auto advance
  • scroll by each thumb
  • circular
  • large image slider
  • inSync with large image slider

Browser Compatibility

The Content Slider is compatible with all major browsers and mobile platforms like iphone / ipad.

Carousel with Good Device Support

The Carousel is compatible with mobile platforms like iphone / ipad.

demos:   1234

Content Slider

As the thumbnail slider allows any HTML content, we can easily turn it into a Content Slider that can slide anything: images, text, HTML content, ... You can even build an automatic news ticker with it.

And, as this demo demonstrates, if you set the slider to be the same size as the thumbnail, the slider looks just like a normal slider as well.

Flexible Markup

You can put any content inside the slider. The Content Slider will take any immediate child within the slider's root element as a thumbnail, and wrap it with a DIV (class="item").

Built-in Navigation Controls

The navigation buttons (Previous, Next, Pause, Play) and pagination bullets are all automatically generated by the slider's script, and you can change them to your own style by customizing the style.css file.
The navigation bullets control is not available when:
  • The scrollByEachThumb option was set to false in the Javascript
  • The license is not valid

Scrollable Content

To accomodate a long text in a content container(marked up as <div class="content"> in this demo), simply specify a given height and overflow:auto; to the CSS style of the content container. #mcts1 .each .content { float:left; padding-left:40px; padding-right:20px; width:220px; height:164px; overflow:auto; }

Other Features / Source Code

Please refer to the jQuery Slider page for details. The source code is also contained in the Download on that page (This demo is the demo3.html in the Download).


Please refer to the license description in page jQuery Slider.


Your Name
Question Title
+ =  
Troubleshooting question? please read Troubleshooting Request before asking.