{"id":1352,"date":"2016-04-19T15:12:08","date_gmt":"2016-04-19T15:12:08","guid":{"rendered":"https:\/\/www.jquery-az.com\/?p=1352"},"modified":"2023-09-24T14:19:08","modified_gmt":"2023-09-24T14:19:08","slug":"a-javascript-based-slider-touchslider-with-5-demos","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/a-javascript-based-slider-touchslider-with-5-demos\/","title":{"rendered":"A JavaScript based slider: TouchSlider with 5 demos"},"content":{"rendered":"

The TouchSlider plug-in for sliding content<\/strong><\/h3>\n

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.<\/p>\n

This simple to use slider supports mouse drag and wheel, touch screen etc.<\/p>\n

You can create a slider with different sized content and full-screen mode support as well.<\/p>\n

See the following demos along with setting up steps for using this slider in your web project.<\/p>\n

A demo of sliding different sized content boxes<\/strong><\/h3>\n

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.<\/p>\n

This is how the slider looks along with code:<\/p>\n

\"JavaScript<\/p>\n

See online demo and code<\/strong><\/h6>\n

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.<\/p>\n

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

<ul id='slider'>\r\n\r\n<li style='display:block'><div>1<\/div><\/li>\r\n\r\n<li><div>2<\/div><\/li>\r\n\r\n<li><div>3<\/div><\/li>\r\n\r\n<li><div>4<\/div><\/li>\r\n\r\n<li><div>5<\/div><\/li>\r\n\r\n<li><div>6<\/div><\/li>\r\n\r\n<\/ul><\/pre>\n
 <\/p>\n
Get the complete code in the demo page.<\/p>\n
A demo of full-width slider with add and remove option<\/strong><\/h3>\n
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.<\/p>\n
Clicking the add button will add a new slide item at the end of the slider. While Remove button will delete from the beginning.<\/p>\n
Apart from that, the following properties are set in the <script> section for sliding:<\/p>\n