Hit enter after type your search item

A JavaScript based slider: TouchSlider with 5 demos

The TouchSlider plug-in for sliding content

The TouchSlider is a JS based plug-in that enables smooth sliding of the content. The TouchSlider is a responsive slider that also supports mobile/tablet as well.

This simple to use slider supports mouse drag and wheel, touch screen etc.

You can create a slider with different sized content and full-screen mode support as well.

See the following demos along with setting up steps for using this slider in your web project.

A demo of sliding different sized content boxes

In this demo, a simple slider is created by using the <li> tags. Along with slider, four buttons are given to stop, pause and move slides next and previous.

This is how the slider looks along with code:

JavaScript slider

See online demo and code

You can amend the CSS to change the properties of content boxes. The slider auto-moves by default while you may also use the buttons to stop the sliding. Similarly, press the play button to slide again. You can also use Next/Previous buttons for moving the slide.

If you want to add more sliding elements, just add another div with <li>, e.g:


 

Get the complete code in the demo page.

A demo of full-width slider with add and remove option

In this demo, a full-width slider is created with options to add and remove slide elements on the go. Along with next/prev buttons, you can also see Add and Remove buttons.

Clicking the add button will add a new slide item at the end of the slider. While Remove button will delete from the beginning.

Apart from that, the following properties are set in the <script> section for sliding:

  • Duration : 500;  (0.5 seconds)
  • Interval : 1000;
  • Mousewheel : false (will not move with the mouse wheel).
  • Mouse : true (drags with the mouse)

See the demo online:

JavaScript slider add remove

See online demo and code

See and change this line in the <script> section for modifying the slider properties:


 

A full-size slider demo

Using about the same properties and options as in above example, except, the fullsize:true. That means the sliding elements will span the full available width (each item).

For the  demo, a few other properties are changed a bit like duration, interval etc.

JavaScript fullsize slider

See online demo and code

Notice this line of code in the script section:


 

You can see, the fullsize is set as true.

A demo of image navigation by using TouchSlider

In this example, four images are used in the slider. One image will be visible at a time. Just like above example, the navigation links are also given. You may also set the speed and interval of sliding. See a demo online:

JavaScript image slider

See online demo and code

In this example, the fullsize value is kept true. As you can see, only the single image is visible at a time. If you make this value false, it will display multiple images at a time. See an example below.

A demo of showing multiple images

If the screen is larger, then setting the fullsize:false may show multiple images at a time. See the following demo online:

JavaScript image slider multiple

See online demo and code

I have also written a guide for multiple images sliding by using Bootstrap carousel here.

Setting up TouchSlider

This is quite simple. Download the package from GitHub website. Just copy/paste the touchslider.js and style.css from src folder to your desired location.

Refer these files in the <body> section for optimization. For example:

<link href=’css/style-slider.css’ rel=’stylesheet’/>

<script src=”js/touchslider.js”></script>

That’s it!

This div height required for enabling the sticky sidebar