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: 1 2 3 4

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