If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

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,

JS Animated. How to add links to TM Slider 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
  3. banners:’fade’,
    

    or a similar one (e.g. banners:’fade’, etc)

  4. If you do not have the line, you need to add it so it looks like this
  5.  <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>
  6. If the line is already there, no changes are needed.
  7. 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.
  8. <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>
  9. Add links to  the slider images so it looks like
  10. <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>
  11. Save the changes and go to the “css” folder  and open a slider.css file
  12. Add the slider image link to css like this
  13. .banner {
    	width:100%;
    	height:100%;
    	position:absolute;
    	left:0;
    	top:0;
    	z-index:1!important;
    
  14. 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:

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