Content Slider

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

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 navigation bullets are all automatically generated by the Javascript, and you can customize their layouts and styles via the CSS file.
  The navigation bullets control is not available when the scrollByEachThumb option was set to false in the Javascript

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.

Ask Question

Question Title:
Your name:
+ =    
  • If your question is for troubleshooting, please read Troubleshooting Request before posting.
  • A title with good keywords will help others. Please make your title specific and on-topic
  • Questions related to styles(CSS) may not be answered

more ...