JS Animated. How to add links to TM Slider slider images

This tutorial is going to show you how to add links to TM Slider slider images in a JS Animated template (based on template 42378, so the names of the files, folders and lines may differ from those in your template). If your JS Animated template uses TM slider, in order to add links to the slider images,

1. Go to the “js” folder and open a file called script.js in Dreamweaver.
2. Check if the file has this line

banners:’fade’,

or a similar one (e.g. banners:’fade’, etc)
3. If you do not have the line, you need to add it so it looks like this

 <script type="text/javascript">

$(document).ready(function(){

   $(".works-list a.tooltips").easyTooltip();

});

$(function(){

   $('.slider')._TMS({

   prevBu:'.prev',

   nextBu:'.next',

   playBu:'.play',

   duration:800,

   easing:'easeOutQuad',

   preset:'diagonalFade',

   pagination:true,

   slideshow:6000,

   numStatus:false,

   pauseOnHover:false,

   banners:'fade',

}); 

})

</script>

  

4. If the line is already there, no changes are needed.
5. Open the .html file that has the slider in Dreamweaver (e.g. index.html) and locate the slider script (just click on the slider in Dreamweaver in the Split mode to highlight the code) e.g.

<div class="slider">

  <ul class="items">

    <li><img src="images/slide-1.jpg" alt=""></li>

    <li><img src="images/slide-2.jpg" alt=""></li>

    <li><img src="images/slide-3.jpg" alt=""></li>

    <li><img src="images/slide-4.jpg" alt=""></li>

  </ul>

</div>

6. Add links to  the slider images so it looks like

<div class="slider">

  <ul class="items">

    <li><img src="images/slide-1.jpg" alt=""><a href="index-1.html" class="banner"></a></li>

    <li><img src="images/slide-2.jpg" alt=""><a href="index-2.html" class="banner"></a></li>

    <li><img src="images/slide-3.jpg" alt=""><a href="index-3.html" class="banner"></a></li>

    <li><img src="images/slide-4.jpg" alt=""><a href="index-4.html" class="banner"></a></li>

  </ul>

</div>

7. Save the changes and go to the “css” folder  and open a slider.css file
8. Add the slider image link to css like this

.banner {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:1!important;

9. Save the changes and open  the .html file in your web browser to check if the slider images now have the links.

Feel free to check the detailed video tutorial below: