JS Animated. Как добавить ссылку для слайдера «Faded slider»

Из этого туториала Вы узнаете, как добавить ссылку для слайдера «Faded slider» в JS-анимированном шаблоне.

Как правило, при нажатии на изображение слайдер отображает следующий слайд. У Вас не будет возможности добавить пользовательские ссылки к слайдам.

1. Войдите в вашу Панель управления хостингом (cPanel) и перейдите в Файловый менеджер (File manager):

   

2. Откройте корневую папку вашего сайта и найдите файл index.html , нажмите на значок Редактировать (Edit):

   

3. Прокрутите вниз файла и найдите следующий фрагмент кода:

   ?

   1 2 3 4 5 6 7 8 9 10 11

   $(function(){ $("#faded").faded({ speed: 1200, crossfade: true, bigtarget: true, autoplay: 4800, autorestart: 1200, autopagination: true }); });

   

4. Замените

   bigtarget: true, на bigtarget: false,

5. Нажмите на кнопку «Сохранить», для того чтобы сохранить изменения:

   

6. Затем, в этом же файле, найдите код слайдера «faded slider», например:

   ?

   1 2 3 4 5 6 7 8 9 10

   <div id="faded"> <div class="rap"> <img src="images/img1.jpg" alt="" width="675" height="400"> <img src="images/img2.jpg" alt="" width="675" height="400"> <img src="images/img3.jpg" alt="" width="675" height="400"> <img src="images/img4.jpg" alt="" width="675" height="400"> <img src="images/img5.jpg" alt="" width="675" height="400"> </div> </div>

7. Давайте добавим ссылку к первому слайду. Вам нужно добавить ссылку, используя тэг href, например:

   ?

   1 2 3

   <a href="http://google.com/"><img src="images/img1.jpg" alt="" width="675" height="400"> </a>

8. Введите нужную ссылку и нажмите на кнопку Сохранить (Сохранить), для того чтобы сохранить изменения. Вы можете добавить ссылки к остальным слайдам аналогично:

   

9. Обновите ваш сайт, для того чтобы просмотреть изменения.

Вы можете также ознакомиться с детальным видео-туториалом ниже: