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.
- 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 the slider, four buttons are given to stop, pause, and move slides next and previous.
This is how the slider looks along with the code:
Full code:
<!DOCTYPE html>
<html>
<head>
<link href='css/style-slider.css' rel='stylesheet'/>
<script src="js/touchslider.js"></script>
</head>
<body>
<h3>A slider with different options</h3>
<div class='swipe' style='margin:10px;'>
<ul id='slider'>
<li style='display:block'><div>1</div></li>
<li><div>2</div></li>
<li><div>3</div></li>
<li><div>4</div></li>
<li><div>5</div></li>
</ul>
</div>
<button onclick="t1.pause();">Pause</button>
<button onclick="t1.play();">Play</button>
<button onclick="t1.prev();">Prev</button>
<button onclick="t1.next();">Next</button>
<br/>
<div id="pagenavi">
</div>
<script type="text/javascript">
console=window.console || {dir:new Function(),log:new Function()};
var active=0,
as=document.getElementById('pagenavi').getElementsByTagName('a');
for(var i=0;i<as.length;i++){
(function(){
var j=i;
as[i].onclick=function(){
t4.slide(j);
return false;
}
})();
}
var t1=new TouchSlider('slider',{duration:800, interval:3000, direction:0, autoplay:true, align:'center', mousewheel:false, mouse:true, fullsize:false});
t4.on('before',function(m,n){
as[m].className='';
as[n].className='active';
})
</script>
</body>
</html>
You can amend the CSS to change the properties of the 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 the Next/Previous buttons to move the slide.
If you want to add more sliding elements, just add another div with <li>, e.g:
<ul id='slider'> <li style='display:block'><div>1</div></li> <li><div>2</div></li> <li><div>3</div></li> <li><div>4</div></li> <li><div>5</div></li> <li><div>6</div></li> </ul>
A demo of full-width slider with add/remove options
In this demo, a full-width slider is created with options to add and remove slide elements on the go.
Along with the next/prev buttons, you can also see the “Add” and “Remove” buttons.
Clicking the add button will add a new slide item at the end of the slider. While the 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 and change this line in the <script> section for modifying the slider properties (as given in the full code above):
var t11=new TouchSlider('slider1',{duration:500, interval:1000, direction:0, autoplay:true, align:'left', mousewheel:false, mouse:true, fullsize:false});
A full-size slider demo
Using about the same properties and options as in the 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.
Use this line in the code (after copying the first example’s code):
var t11=new TouchSlider('slider1',{duration:1000, interval:1200, direction:0, autoplay:true, align:'left', mousewheel:false, mouse:true, fullsize:true});
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 the above example, the navigation links are also given. You may also set the speed and interval of sliding.
The code:
<!DOCTYPE html>
<html>
<head>
<link href='css/style-slider.css' rel='stylesheet'/>
<script src="js/touchslider.js"></script>
</head>
<body>
<h3>A demo of image slider</h3>
<div class='swipe'>
<ul id='slider4'>
<li style='display:block'><img src="images/banana.jpg" alt="" /></a></li>
<li><img src="images/currant.jpg" alt="" /></li>
<li><img src="images/strawberries.jpg" alt="" /></li>
<li><img src="images/mango.jpg" alt="" /></li>
</ul>
</div>
<div>
<a href="#" onclick="t4.slide(0);return false;"> 1 </a>
<a href="#" onclick="t4.slide(1);return false;"> 2 </a>
<a href="#" onclick="t4.slide(2);return false;"> 3 </a>
<a href="#" onclick="t4.slide(3);return false;"> 4 </a>
</div>
<br/>
<div id="pagenavi">Slide Navigation:
<a href="#" class="active">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>
<br>
<button onclick="t4.pause();">Pause</button>
<button onclick="t4.play();">Play</button>
<button onclick="t4.prev();">Prev</button>
<button onclick="t4.next();">Next</button>
<script type="text/javascript">
console=window.console || {dir:new Function(),log:new Function()};
var active=0,
as=document.getElementById('pagenavi').getElementsByTagName('a');
for(var i=0;i<as.length;i++){
(function(){
var j=i;
as[i].onclick=function(){
t4.slide(j);
return false;
}
})();
}
var t4=new TouchSlider('slider4',{speed:1000, direction:0, interval:2000, fullsize:true});
t4.on('before',function(m,n){
as[m].className='';
as[n].className='active';
})
</script>
</body>
</html>
In this example, the fullsize value is kept true. As you can see, only a single image is visible at a time.
If you make this value false, it will display multiple images at a time. See the 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:
Code:
<!DOCTYPE html>
<html>
<head>
<link href='css/style-slider.css' rel='stylesheet'/>
<script src="js/touchslider.js"></script>
</head>
<body>
<h3>A demo of image slider</h3>
<div class='swipe'>
<ul id='slider4'>
<li style='display:block'><img src="images/banana.jpg" alt="" /></a></li>
<li><img src="images/currant.jpg" alt="" /></li>
<li><img src="images/strawberries.jpg" alt="" /></li>
<li><img src="images/mango.jpg" alt="" /></li>
</ul>
</div>
<div>
<a href="#" onclick="t4.slide(0);return false;"> 1 </a>
<a href="#" onclick="t4.slide(1);return false;"> 2 </a>
<a href="#" onclick="t4.slide(2);return false;"> 3 </a>
<a href="#" onclick="t4.slide(3);return false;"> 4 </a>
</div>
<br/>
<div id="pagenavi">Slide Navigation:
<a href="#" class="active">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>
<br>
<button onclick="t4.pause();">Pause</button>
<button onclick="t4.play();">Play</button>
<button onclick="t4.prev();">Prev</button>
<button onclick="t4.next();">Next</button>
<script type="text/javascript">
console=window.console || {dir:new Function(),log:new Function()};
var active=0,
as=document.getElementById('pagenavi').getElementsByTagName('a');
for(var i=0;i<as.length;i++){
(function(){
var j=i;
as[i].onclick=function(){
t4.slide(j);
return false;
}
})();
}
var t4=new TouchSlider('slider4',{speed:1000, direction:0, interval:2000, fullsize:false});
t4.on('before',function(m,n){
as[m].className='';
as[n].className='active';
})
</script>
</body>
</html>
I have also written a guide for multiple-image sliding by using the 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!
