JS Animated. Как добавить ссылки на изображения TM Слайдера

Этот урок покажет, как добавить ссылки на изображения TM Слайдера в шаблоне JS Animated (показано на шаблоне 42378, поэтому названия файлов, папок и строк у Вас могут быть другие). Если у Вашего шаблона JS Animated (анимированный с помощью JS) есть TM Слайдер, то для того, чтоб добавить ссылки на изображения слайдера нужно

1. Зайти в папку “js” и через программу Dreamweaver открыть файл под названием script.js.
2. Проверьте есть ли в этом файле данная строка

banners:’fade’,

или похожая на нее (например, banners:’fade’, и т.п.)
3. Если нет этой строки, то добавьте ее. Получится что-то такое:

 <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. Если строка уже там, то ничего не меняйте.
5. Через Dreamweaver откройте .html файл, в котором находится слайдер (например, index.html). Найдите скрипт слайдера (в программе Dreamweaver в режиме Split кликните просто на слайдер для того, чтоб выделить код). Например:

<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. Теперь добавьте туда ссылки на изображения слайдера.

<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. Сохраните изменения. В папке “css” откройте файл slider.css
8. В css добавьте ссылку на изображения слайдера.

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

9. Сохраните изображения и откройте в браузере файл .html, чтобы проверить если ли сейчас ссылки у изображений.

Пожалуйста, ознакомьтесь с детальным, обучающим видео ниже: