jQuery Content Slider – Basic plug in

I was looking for a jQuery Content Slider plug in for a project I was working on today. I couldn’t find one that fit the bill so decided to develop my own. It is in no way as fully featured as some of the other jQuery sliders out there as it was developed in as quick a time as possible to fill the specific need I had.

If you have any questions or comments about the usage of this plug in or would like to see me develop this further, let me know in the comments or contact me.



Firstly, you need to link to jQuery and the plug-in files (download the files using the above link).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jquery.content.slider.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.content.slider.css" />

You will want to change (at least) 3 of the values in the CSS to make your slider the required size. The first 2 define the height and width of the viewable area and the third defines with width of the individual slides. If want to show 1 slide at a time you simply need to set both widths to the same value. In the demo you will see that we have 3 slides visible at a time. You can of course change other values to tailor the content slider.

You can put any content you like into this jQuery content slider. Whatever you put between list items constitutes a slide.

Your slider is laid out like this:

<div id="contentSlider">
		<li>Content area 1</li>
		<li>Content area 2</li>
		<li>Content area 3</li>
		<li>Content area 4</li>
		<li>Content area 5</li>
		<li>Content area 6</li>
		<li>Content area 7</li>
		<li>Content area 8</li>
		<li>Content area 9</li>

And finally you initialise the slider like so:


As mentioned previously, this content slider is not as fully featured as some out there at the moment. Currently, there are only 2 configurable options which can be specified at initialisation:

    speed: 200, //specifies the time in milliseconds for each transition
    addClasses: 'additionalClass1 additionalClass1' //allows you to specify additional classes to add to the slider (useful if you need 2 or more differently styled sliders on your page)
Did you like this post? Why not subscribe?

One thought on “jQuery Content Slider – Basic plug in

  1. Pingback: jQuery Coverflow inspired Slider plugin - Fraser Hart

Leave a Reply

Your email address will not be published. Required fields are marked *