Слайдер для сайта на js

слайдер для сайта

В данной статье рассмотрим один из самых популярных слайдеров – Slick слайдер для сайта на html.

Слайдер-карусель для контента один из популярных элементов практически любого продающего сайта.

Использование слайдера необходимо при создании сайта как html так и сайта на любой CMS. В нем можно разместить много информации не увеличивая визуально страницу по вертикали.

Отзывы, примеры работ, кейсы, видео и фото примеров, информация о сотрудниках или клиентах – это малая часть того, что можно поместить в слайдер.

В процессе разработки сайтов я перепробовал много различных плагинов и скриптов слайдеров. И в итоге остановился на Slick slider.

Из плюсов следует отметить множество настроек и простоту установки.

Скачать архив со скриптом и стилями можно тут. Для работы требуется подключение библиотеки jQuery.

Практически все необходимые функции слайдера в нем есть, и даже немножко больше.

Ниже приведен стандартный пример слайдера.

В head сайта нужно подключить стили самого слайдера и при необходимости стандартную тему от slick

<link rel="stylesheet" type="text/css" href="https://volgo-prime.ru/css/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://volgo-prime.ru/css/slick-theme.css"/>

Перед закрывающим тегом подключаем библиотеку jQuery и сам slick.js

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

Сам слайдер помещаем в div. И каждый слайд также должен находится в div.
Дальше в слайде уже можно размещать любой контент. Даже еще один слайдер)))

<div class="slider">
<div class="slide">
<img src="https://volgo-prime.ru/site/test.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="slide">
<img src="https://volgo-prime.ru/site/test.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="slide">
<img src="https://volgo-prime.ru/site/test.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="slide">
<img src="https://volgo-prime.ru/site/test.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="slide">
<img src="https://volgo-prime.ru/site/test.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>

 

И для запуска самого слайдера нужен всего небольшой скрипт

$('.slider').slick();

Пример готового слайдера можно посмотреть на моем Codepen.

Этот слайдер для сайта имеет много возможностей для настройки.

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

Слайдер имеет возможность изменять свои настройки в зависимости от ширины экрана устройства.

Примеры настроек и вариантов слайдера для сайта на html можно найти на официальной странице.

Поделиться

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *