Слайдер для сайта ucoz можно добавить любой, в интернете есть огромное количество разнообразных вариантов, которые можно бесплатно брать и устанавливать к себе на сайт. Такой слайдер нужно немного под настроить под свой сайт и всё, как раз один из таких слайдеров я и покажу как добавить на сайт.
Очень важно! Если вдруг, перед тем как изучить урок вы обнаружили что вид вашей панели отличается
от того что описано в уроке, не пугайтесь! Просто переключите новую панель на старую.
Как это сделать? Вот в этой инструкции.
Рекомендую почитать:
По началу я хотел установть слайдер который я уже умею устанавливать, у меня даже на канале есть по его установке урок, но дело в то что этот слайдер отображается не очень хорошо при загрузке, если в нём загружаются информеры. Так что я решил найти новый. Полазив по интернету мне удалось такой обнаружить, правда пришлось повозится с его настройкой.
В общем сейчас я вам расскажу и покажу как его установить на свой сайт. Кстати вы его уже должны были видеть на картинках из прошлого урока, но всё-же покажу ещё разок.
Смотрим:
Установка
Начнём установку слайдера, первым делом скачайте архив с кнопками, стилями и javascriptom вот по этой ссылке.
Распакуйте данный архив на рабочий стол, должна получится папка с вот таким содержимым.
Смотрим:
Всё содержимое папки нужно залить на сайт в файловый менеджер, это мы с вами делали много раз, но перед этим нужно создать отдельную папку в нём.
Смотрим:
В папку добавляем три файла:
Установка скрипта:
Теперь нужно установить подключение скрипта к страницам, для этого пройдите в управление дизайном и нажмите нижняя часть сайта.
Смотрим:
Нижняя часть сайта:
Откроется страница с кодом, вставьте в самом конце новую строчку кода.
Код:
Смотрим:
Это тег который подключает скрипт на страницы нашего сайта. Тег мы вставили, теперь нужно ему указать путь до скрипта, для этого зайдите в файловый менеджер в ту папку куда мы залили три файла, и скопируйте у одного из файлов ссылку. Нажмите у файла sliderb.js получить ссылку, и скопируйте её.
Смотрим:
Скопированную ссылку вставляем в тег скрипта между двойных кавычек и сохраняем документ.
Смотрим:
Подключаем стили:
Сейчас нужно подключить стили слайдера, для этого зайдите в управление дизайном и откройте таблицу стилей.
Смотрим:
Откроется страница, в самом верху установить вот такой вот код.
Смотрим:
Код:
Это код который в нашу таблицу стилей подключает ещё один файл со стилями, который мы кстати закачали в ту созданную папку. Он нам нужен для того что бы не подключать для каждой станицы стили по отдельности, это очень не удобно, проще подключить новый файл со стилями уже к готовой таблице, которая подключена ко всем страницам на сайте. Подключить стили можно точно также как мы подключали скрипт, то-есть в данный код между кавычек, вставить ссылку на стили.
Смотрим где скопировать ссылку. После не забудьте сохранить документ.
Смотрим:
Подключаем слайдер:
Всё нам осталось в верхнею часть сайта подключить слайдер, для этого зайдите в верхнею часть сайта, это там где вы заходили в нижнею часть сайта, только на одну кнопку выше, и в самом конце вставьте следующий код.
Код:
<div class="wrapper">
<ul>
<li><a href="Ссылка на страницу с игрой" title=""><img src="Ссылка на картинку"></a></li>
<li><a href="Ссылка на страницу с игрой" title=""><img src="Ссылка на картинку"></a></li>
<li><a href="Ссылка на страницу с игрой" title=""><img src="Ссылка на картинку"></a></li>
<li><a href="Ссылка на страницу с игрой" title=""><img src="Ссылка на картинку"></a></li>
<li><a href="Ссылка на страницу с игрой" title=""><img src="Ссылка на картинку"></a></li>
<li><a href="Ссылка на страницу с игрой" title=""><img src="Ссылка на картинку"></a></li>
<li><a href="Ссылка на страницу с игрой" title=""><img src="Ссылка на картинку"></a></li>
</ul>
</div>
</div>
Смотрим:
Давайте разберём код, нас интересует из этого всего массива тег <li>. Один такой тег <ли> это одна картинка в слайдере.
Смотрим:
В нашем коде присутствует семь тегов ли <li></li>. Сколько хотите что-бы в слайдере было картинок, столько тегов ли и должно быть в коде. В моём случае 7 тегов семь картинок, из них четыре только показываются на экране другие прячутся за стрелками слева, и справа.
В тегах ли есть ссылка тега а <a></a>, внутри него помещается тег на картинку <img>. Это нужно для того что бы картинка стала ссылкой и по ней можно было кликать, то есть таким образом кликнув по картинке можно попасть на игру.
В принципе вот и всё, там где я написал ссылка на картинку, туда нужно указать ссылку на картинку, а где стоит ссылка на страницу с игрой туда ссылку на игру. После чего сохраните документ и посмотрите что получится на сайте, слайдер должен работать! У меня работает))
Вот и всё до нового урока!