MKA Web-Junior Urok 08 1592573409

Урок 8
Работа
с плагинами
Содержание
Работа с плагинами................................................................. 3
Использование карусели на сайте................................ 3
Создание карусели........................................................... 6
Материалы урока прикреплены к данному PDF-файлу. Для доступа

к ним, файл необходимо открыть в программе Adobe Acrobat Reader.
2
Работа с плагинами
Использование карусели на сайте
Карусель — это интересный способ размещения
информации на сайте. Карусель — один из самых попу-
лярных компонентов в дизайне. Она реализуется с по-
мощью CSS, JavaScript. Ее часто используют, чтобы при-
влечь внимание посетителей. Пример карусели на сайте
Microsoft (рис. 1).
Рисунок 1
На ресурсе MarvelHQ в карусели странички разных
персонажей (рис. 2).
Существует множество типов каруселей, однако у всех
можно выделить общие черты:
1. Расположение. В большинстве случаев карусель
находится в верхней части экрана, под хедером и
3
Урок 8
навигационным меню. А сам слайдер занимает боль-

шую часть пространства на странице.
2. Содержание. Карусель чаще всего состоит из изобра-
жения, текста и, если это необходимо, кнопки.
Рисунок 2
3. Кнопки и индикаторы. Можно построить навигацию
по карусели. Можно предоставить пользователям ли-
стать слайды самостоятельно, добавив кнопки про-
крутки (вправо/влево). Также можно добавить к ка-
русели индикаторы состояния, чтобы всегда можно
было пролистать все слайды до конца (рис. 3).
Рисунок 3
4
4. Адаптивность. Чрезвычайно важно создавать адаптив-

ные карусели, которые бы корректно отображались
на устройствах с разным разрешением экрана (рис. 4).
Рисунок 4
5. Автопрокрутка. Устанавливая автопрокрутку, слайды
не должны меняться слишком быстро или слишком
медленно (рис. 5).
Рисунок 5
5
Урок 8
Карусель эффективна в том случае, если содержит полез-

ный контент. То есть, последовательно прокручивая слай-
ды, пользователь получает новую для себя информацию.
Однако у карусели есть и минусы. Например, пользо-
ватели часто ее игнорируют. К тому же, видя изображе-
ние, пользователь не получает целостного представления
о продукте.
Выделим основные плюсы использования карусели. На
главной странице слайдер занимает основное простран-
ство. Это первое, что увидит посетитель. Также на одном
слайде можно разместить целый блок информации, ко-
торая привлекает внимание пользователей.
Качество карусели определяется ее текстовым на-
полнением и изображениями. Слайды карусели следует
создавать в общей стилистике сайта, придерживаясь об-
щей цветовой схемы. Последовательность слайдов следу-
ет выстраивать в соответствии с их важностью. Сначала
следует подавать важную информацию.
Создание карусели
Рисунок 6
6
Поместим карусель с баннерами о LEGO на главной

странице (рис. 6).
Для этого нам понадобится JavaScript. Не пугайтесь,
что не знаете этот язык, ведь сделать это довольно про-
сто. Для этого нам понадобится библиотека jQuery, ко-
торая значительно упрощает работу с JavaScript (рис. 7).
Рисунок 7
Подключим к ней плагин Slick для создания карусе-
лей (рис. 8).
Рисунок 8
7
Урок 8
Начнем с того, что разместим файлы Slick в папке

с сайтом. В дополнительных материалах вы найдете ар-
хив. Также Slick можно скачать на официальном сайте
(рис. 9): https://kenwheeler.github.io/slick/#go-get-it.
Рисунок 9
В архиве найдите папку slick и перетяните ее в папку
с вашим сайтом. В папке с сайтом создайте еще одну пап-
ку — js. В ней будут храниться ваши скрипты. Создайте
в ней пустой текстовый файл script.js (рис. 10).
Рисунок 10
Теперь откройте в редакторе страницу, на которой хо-
тите разместить карусель. Например, главную страницу
index.html. Сначала подключите к файлу jQuery. Для этого
нужно добавить <script> с параметрами в конец <body>.
8
Официальная документация slick рекомендует под-

ключать jQuery вот так:
<script type=”text/javascript”
src=”https://code.jquery.com/
jquery-1.11.0.min.js”></script>
src=”https://code.jquery.com/
jquery-migrate-1.2.1.min.js”></script>
Затем нужно подключить скрипт со Slick, а также соз-

данный нами файл script.js:
src=”slick/slick.min.js”></script>
src=”js/script.js”></script>
Таким образом, после закрывающего тега </footer>

и до закрывающего тега </body> у нас должна получить-
ся следующая запись (рис. 11):
Рисунок 11
Также нужно подключить таблицу стилей Slick. Для
этого просто добавьте в <head> две строки (рис. 12):
9
Урок 8
<link rel=”stylesheet” type=”text/css”

href=”slick/slick.css”/>
<link rel=”stylesheet” type=”text/css”

href=”slick/slick-theme.css”/>
Рисунок 12
Теперь в месте, где вы хотите поместить карусель,
создайте <div> с тегом carousele. В него поместите <div>
с тегом carousele-element. Таких carousele-element вы мо-
жете создать столько, сколько хотите. Например, два.
<div class=”carousele”>
<div class=”carousele-element”>
</div>
<div class=”carousele-element”>
</div>
</div>
В самом carousele-element должен находиться контент,

который будет отображаться в карусели. Это может быть
текст, видео, но чаще всего туда помещают изображение.
Так и сделаем:
10
<center>
<img src="https://res.cloudinary.com/dfog0e294/image/
upload/v1547718183/webdev/slide-01.png"/>
</div>
</center>
Теперь добавим стили для нашей карусели в style.css.

.carousele{
margin: 10px;
}
.carousele div img{
width: 100%
}
Теперь нужно настроить скрипт с нашей каруселью

slick. Откройте в редакторе script.js. Добавьте туда следу-
ющую запись:
$(document).ready(function(){
$(‘.carousele’).slick(
{
});
});
В .slick({}); вы можете добавлять настройки карусели.

Полный список настроек доступен на официальном сай-
те slick: https://kenwheeler.github.io/slick/#settings.
Мы же используем только две из них: отключим стрел-
ки для переключения между баннерами и включим авто-
матическую смену баннеров.
11
Урок 8
arrows: false,
autoplay: true
Наш скрипт будет выглядеть так (рис. 13):
Рисунок 13
Теперь баннеры будут переключаться автоматиче-
ски (рис. 14).
Рисунок 14
12
13
Урок 8
© Компьютерная Академия «Шаг»

www.itstep.org
Все права на охраняемые авторским правом фото-, аудио- и видеопро-

изведения, фрагменты которых использованы в материале, принадле-
жат их законным владельцам. Фрагменты произведений используются
в иллюстративных целях в объёме, оправданном поставленной задачей,
в рамках учебного процесса и в учебных целях, в соответствии со ст.
1274 ч. 4 ГК РФ и ст. 21 и 23 Закона Украины «Про авторське право і
суміжні права». Объём и способ цитируемых произведений соответству-
ет принятым нормам, не наносит ущерба нормальному использованию
объектов авторского права и не ущемляет законные интересы автора
и правообладателей. Цитируемые фрагменты произведений на момент
использования не могут быть заменены альтернативными, не охраня-
емыми авторским правом аналогами, и как таковые соответствуют
критериям добросовестного использования и честного использования.
Все права защищены. Полное или частичное копирование материалов
запрещено. Согласование использования произведений или их фраг-
ментов производится с авторами и правообладателями. Согласованное
использование материалов возможно только при указании источника.
Ответственность за несанкционированное копирование и коммерческое
использование материалов определяется действующим законодатель-
ством Украины.

MKA Web-Junior Urok 08 1592573409

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

MKA Web-Junior Urok 08 1592573409

Загружено:

Авторское право:

Доступные форматы

Урок 8

Материалы урока прикреплены к данному PDF-файлу. Для доступа

навигационным меню. А сам слайдер занимает боль-

4. Адаптивность. Чрезвычайно важно создавать адаптив-

Карусель эффективна в том случае, если содержит полез-

Поместим карусель с баннерами о LEGO на главной

Начнем с того, что разместим файлы Slick в папке

Официальная документация slick рекомендует под-

Затем нужно подключить скрипт со Slick, а также соз-

Таким образом, после закрывающего тега </footer>

<link rel=”stylesheet” type=”text/css”

<link rel=”stylesheet” type=”text/css”

В самом carousele-element должен находиться контент,

Теперь добавим стили для нашей карусели в style.css.

Теперь нужно настроить скрипт с нашей каруселью

В .slick({}); вы можете добавлять настройки карусели.

Наш скрипт будет выглядеть так (рис. 13):

© Компьютерная Академия «Шаг»

Все права на охраняемые авторским правом фото-, аудио- и видеопро-

Вам также может понравиться