Карусель, карусель — это радость для нас
Карусель, карусель начинает рассказ.
Это сказки, песни и веселье!
Карусель, карусель — это радость для нас,
Прокатись на нашей карусели!
Что такое карусель? Если ответить наукообразно – будет примерно так – это элемент интерфейса для демонстрации на странице сайта серии слайдов.
Проще всего показать на примере – вот пример:
1
2
3
4
5
6
7
8
9
10
11
12
Карусели на сайтах используются часто. В основном в качестве слайдов используются изображения. На небольшом пространстве можно разместить много информации.
На самом деле слайдером может быть любой html-блок, как включающий, так и не включающий изображения.
С помощью карусели удобно оформить портфолио (как на нашем сайте), последовательные этапы работ, список сотрудников и вообще любой список элементов.
Делается не сложно – html + css + js (jQuery). Нет смысла разрабатывать собственное решение – существует достаточно большое количество готовых библиотек и плагинов позволяющих организовать карусель.
На нашем сайте используется jQuery плагин Owl Carousel 2
Так же для организации карусели часто используются –
Swiper – The Most Modern Mobile Touch Slider
bxSlider – Responsive jQuery Slider
Fancybox – Carousel Responsive, touch-friendly carousels with natural, real-life feel
продолжаем список….
Принцип работы плагина заключается в следующем
Определяется контейнер для карусели, в него помещаются слайдеры
<div class="container">
<div> Slider </div>
<div> Slider </div>
<div> Slider </div>
</div>Запускается карусель
jQuery( function($) {
$(document).ready(function(){
$(".container").Carousel();
});
});
Отдельно разберем на примере Owl Carousel 2
базовую настройку плагина Owl Carousel 2
особенности подключения плагина
подготовку информации для слайдеров из WordPress