Слайдер для сайта ucoz можно добавить любой, в интернете есть огромное количество разнообразных вариантов, которые можно бесплатно брать и устанавливать к себе на сайт. Такой слайдер нужно немного под настроить под свой сайт и всё, как раз один из таких слайдеров я и покажу как добавить на сайт.

Очень важно! Если вдруг, перед тем как изучить урок вы обнаружили что вид вашей панели отличается от того что описано в уроке, не пугайтесь! Просто переключите новую панель на старую. Как это сделать? Вот в этой инструкции.

Рекомендую почитать:
Как поменять адрес сайта на ucoz Всего за 200р.

По началу я хотел установть слайдер который я уже умею устанавливать, у меня даже на канале есть по его установке урок, но дело в то что этот слайдер отображается не очень хорошо при загрузке, если в нём загружаются информеры. Так что я решил найти новый. Полазив по интернету мне удалось такой обнаружить, правда пришлось повозится с его настройкой.

В общем сейчас я вам расскажу и покажу как его установить на свой сайт. Кстати вы его уже должны были видеть на картинках из прошлого урока, но всё-же покажу ещё разок.

Смотрим:

Установка

Начнём установку слайдера, первым делом скачайте архив с кнопками, стилями и javascriptom вот по этой ссылке.

Распакуйте данный архив на рабочий стол, должна получится папка с вот таким содержимым.

Смотрим:

Всё содержимое папки нужно залить на сайт в файловый менеджер, это мы с вами делали много раз, но перед этим нужно создать отдельную папку в нём.

Смотрим:

В папку добавляем три файла:

Установка скрипта:

Теперь нужно установить подключение скрипта к страницам, для этого пройдите в управление дизайном и нажмите нижняя часть сайта.

Смотрим:

Нижняя часть сайта:

Откроется страница с кодом, вставьте в самом конце новую строчку кода.

Код:

Смотрим:

Это тег который подключает скрипт на страницы нашего сайта. Тег мы вставили, теперь нужно ему указать путь до скрипта, для этого зайдите в файловый менеджер в ту папку куда мы залили три файла, и скопируйте у одного из файлов ссылку. Нажмите у файла sliderb.js получить ссылку, и скопируйте её.

Смотрим:

Скопированную ссылку вставляем в тег скрипта между двойных кавычек и сохраняем документ.

Смотрим:

Подключаем стили:

Сейчас нужно подключить стили слайдера, для этого зайдите в управление дизайном и откройте таблицу стилей.

Смотрим:

Откроется страница, в самом верху установить вот такой вот код.

Смотрим:

Код:

Это код который в нашу таблицу стилей подключает ещё один файл со стилями, который мы кстати закачали в ту созданную папку. Он нам нужен для того что бы не подключать для каждой станицы стили по отдельности, это очень не удобно, проще подключить новый файл со стилями уже к готовой таблице, которая подключена ко всем страницам на сайте. Подключить стили можно точно также как мы подключали скрипт, то-есть в данный код между кавычек, вставить ссылку на стили.

Смотрим где скопировать ссылку. После не забудьте сохранить документ.

Смотрим:

Подключаем слайдер:

Всё нам осталось в верхнею часть сайта подключить слайдер, для этого зайдите в верхнею часть сайта, это там где вы заходили в нижнею часть сайта, только на одну кнопку выше, и в самом конце вставьте следующий код.

Код:

Смотрим:

Давайте разберём код, нас интересует из этого всего массива тег <li>. Один такой тег <ли> это одна картинка в слайдере.

Смотрим:

В нашем коде присутствует семь тегов ли <li></li>. Сколько хотите что-бы в слайдере было картинок, столько тегов ли и должно быть в коде. В моём случае 7 тегов семь картинок, из них четыре только показываются на экране другие прячутся за стрелками слева, и справа.

В тегах ли есть ссылка тега а <a></a>, внутри него помещается тег на картинку <img>. Это нужно для того что бы картинка стала ссылкой и по ней можно было кликать, то есть таким образом кликнув по картинке можно попасть на игру.

В принципе вот и всё, там где я написал ссылка на картинку, туда нужно указать ссылку на картинку, а где стоит ссылка на страницу с игрой туда ссылку на игру. После чего сохраните документ и посмотрите что получится на сайте, слайдер должен работать! У меня работает))

Вот и всё до нового урока!