/ Scripts & jquery / Owl Carousel

Owl Carousel

HIT

21.02.2020

4479

Разберем решение по созданию слайдеров и каруселей Owl Carousel 2.

У данной карусели есть ряд преимуществ по сравнению с каруселью slick:

  • Есть возможность формировать хэш-ссылки для слайдов
  • Работает более быстро и стабильно
  • Отлично реализован Lazyload! Реально ускоряет как эмпирически, так и по показателям PageSpeed Insights.
  • Есть функция возврата (rewind) к первому слайду при достижении последнего слайда
  • «из коробки» есть функция перемотки колесом мыши.

Чего в нем нет, так это связки слайдера с миниатюрами, но реализовать это можно (об этом ниже).

Базовая верстка:

<div id="index-slider" class="owl-carousel owl-theme">

	<div class="item"><img class="owl-lazy" data-src=""</div>
	<div class="item"><img class="owl-lazy" data-src=""</div>
	<div class="item"><img class="owl-lazy" data-src=""</div>	
	
</div>

Скрипт запуска с параметрами:

$(document).ready(function() {   
	
	$('#index-slider').owlCarousel({
		items:1,
		loop:true,
		margin:10,
		nav:true,
		dots:false,
		lazyLoad:true,
		smartSpeed:1000,
		//animateOut:'fadeOut',
		autoplay:true,
		navText: ['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>'],
	})	

});

Некоторые стили:

#index-slider {position: relative;}	
	
.owl-nav {
    position: absolute;
    bottom: 30px;
    right: 30px;
    font-size: 1rem;
}
	
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
    margin: 0 10px;
    padding: 15px !important;
    background: rgba(51, 51, 51, 0.7);
    color: #fff;
}

Миниатюры слайдов

«Из коробки» нет функционала формирования миниатюр с навигацией на основной слайдер, но метод описан здесь.

<div id="sync1" class="owl-carousel owl-theme">
    <div class="item">
        <h1>1</h1>
    </div>
    <div class="item">
        <h1>2</h1>
    </div>
    <div class="item">
        <h1>3</h1>
    </div>
    <div class="item">
        <h1>4</h1>
    </div>
    <div class="item">
        <h1>5</h1>
    </div>
    <div class="item">
        <h1>6</h1>
    </div>
    <div class="item">
        <h1>7</h1>
    </div>
    <div class="item">
        <h1>8</h1>
    </div>
</div>

<div id="sync2" class="owl-carousel owl-theme">
    <div class="item">
        <h1>1</h1>
    </div>
    <div class="item">
        <h1>2</h1>
    </div>
    <div class="item">
        <h1>3</h1>
    </div>
    <div class="item">
        <h1>4</h1>
    </div>
    <div class="item">
        <h1>5</h1>
    </div>
    <div class="item">
        <h1>6</h1>
    </div>
    <div class="item">
        <h1>7</h1>
    </div>
    <div class="item">
        <h1>8</h1>
    </div>
</div>
#sync1 .item {
  background: #0c83e7;
  padding: 80px 0px;
  margin: 5px;
  color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

#sync2 .item {
  background: #c9c9c9;
  padding: 10px 0px;
  margin: 5px;
  color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
#sync2 .item h1 {
  font-size: 18px;
}
#sync2 .current .item {
  background: #0c83e7;
}

.owl-theme .owl-nav {
  /*default owl-theme theme reset .disabled:hover links */
}
.owl-theme .owl-nav [class*="owl-"] {
  transition: all 0.3s ease;
}
.owl-theme .owl-nav [class*="owl-"].disabled:hover {
  background-color: #d6d6d6;
}

#sync1.owl-theme {
  position: relative;
}
#sync1.owl-theme .owl-next,
#sync1.owl-theme .owl-prev {
  width: 22px;
  height: 40px;
  margin-top: -20px;
  position: absolute;
  top: 50%;
}
#sync1.owl-theme .owl-prev {
  left: 10px;
}
#sync1.owl-theme .owl-next {
  right: 10px;
}
$(document).ready(function() {

    var sync1 = $("#sync1");
    var sync2 = $("#sync2");
    var slidesPerPage = 4; //globaly define number of elements per page
    var syncedSecondary = true;

    sync1.owlCarousel({
        items: 1,
        slideSpeed: 2000,
        nav: true,
        autoplay: false, 
        dots: true,
        loop: true,
        responsiveRefreshRate: 200,
        navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>', '<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
    }).on('changed.owl.carousel', syncPosition);

    sync2
        .on('initialized.owl.carousel', function() {
            sync2.find(".owl-item").eq(0).addClass("current");
        })
        .owlCarousel({
            items: slidesPerPage,
            dots: true,
            nav: true,
            smartSpeed: 200,
            slideSpeed: 500,
            slideBy: slidesPerPage, //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
            responsiveRefreshRate: 100
        }).on('changed.owl.carousel', syncPosition2);

    function syncPosition(el) {
        //if you set loop to false, you have to restore this next line
        //var current = el.item.index;

        //if you disable loop you have to comment this block
        var count = el.item.count - 1;
        var current = Math.round(el.item.index - (el.item.count / 2) - .5);

        if (current < 0) {
            current = count;
        }
        if (current > count) {
            current = 0;
        }

        //end block

        sync2
            .find(".owl-item")
            .removeClass("current")
            .eq(current)
            .addClass("current");
        var onscreen = sync2.find('.owl-item.active').length - 1;
        var start = sync2.find('.owl-item.active').first().index();
        var end = sync2.find('.owl-item.active').last().index();

        if (current > end) {
            sync2.data('owl.carousel').to(current, 100, true);
        }
        if (current < start) {
            sync2.data('owl.carousel').to(current - onscreen, 100, true);
        }
    }

    function syncPosition2(el) {
        if (syncedSecondary) {
            var number = el.item.index;
            sync1.data('owl.carousel').to(number, 100, true);
        }
    }

    sync2.on("click", ".owl-item", function(e) {
        e.preventDefault();
        var number = $(this).index();
        sync1.data('owl.carousel').to(number, 300, true);
    });
});
В данном решении есть небольшой недочет при обратной прокрутке миниатюр. В demo-примере он виден.

Альтернативный способ добавления миниатюр

Также миниатюры (thumbnail) слайдов можно добавить с помощью скрипта Owl Carousel 2 Thumbnails plugin. В настройки слайдера добавляются новые параметры:

$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    thumbs: true,
    thumbsPrerendered: true
  });
});

Соответственно добавляем в слайдер вывод миниатюр:

<div class="owl-carousel" data-slider-id="1">
    <div>Your Content</div>
    <div>Your Content</div>
    <div>Your Content</div>
    <div>Your Content</div>
</div>
<div class="owl-thumbs" data-slider-id="1">
    <button class="owl-thumb-item">slide 1</button>
    <button class="owl-thumb-item">slide 2</button>
    <button class="owl-thumb-item">slide 3</button>
    <button class="owl-thumb-item">slide 4</button>
</div>

Либо можно указать миниатюры таким образом:

<div class="owl-carousel">
    <div data-thumb='Content of your thumbnail (can be anything)'> Your Content </div>
    <div data-thumb='Content of your thumbnail (can be anything)'> Your Content </div>
    <div data-thumb='Content of your thumbnail (can be anything)'> Your Content </div>
    <div data-thumb='Content of your thumbnail (can be anything)'> Your Content </div>
</div>

Дополнительные настройки

thumbImage: false, // При использовании на слайде только изображений (например, в демонстрации) используйте этот параметр для динамического создания миниатюр без использования атрибута data-thumb.
thumbsPrerendered: true, // Включите это, если у вас есть предварительно обработанные миниатюры в вашем html, вместо того, чтобы позволить этому плагину создавать их. Это рекомендуется, так как это предотвратит FOUC   
thumbContainerClass: 'owl-thumbs', // Класс контейнера миниатюр
thumbItemClass: 'owl-thumb-item' // Класс миниатюры

Отключить автопрокрутку

Параметр автопрокрутки при наведении: autoplayHoverPause:true

Чтобы автопрокрутка отключалась при нажатии стрелок, при этом включалась у остальных ранее отключенных:

$('.owl-prev, .owl-next').click(function(){
	$('.owl-carousel').trigger('play.owl.autoplay');
	$(this).parents('.owl-carousel').trigger('stop.owl.autoplay');
});

Чтобы автопрокрутка отключалась при перетаскивании (свайпе) нужно прописать в параметры слайдера функцию onDragged: stopautoplay:

	jQuery('.service-slider').owlCarousel({
		items:1,
		loop:true,
		margin:0,
		nav:true,
		dots:false,
		lazyLoad:true,
		smartSpeed:1000,
		autoplay:true,
		autoplayHoverPause:true,
		onDragged: stopautoplay,
		navText: ['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>'],
	});

И прописать функцию:

function stopautoplay(event) {
	$('.owl-carousel').trigger('stop.owl.autoplay');
}

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

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

Автоматический запуск видео в слайдах

Прописываем параметр с привязкой функции — onTranslated: videoautoplay. Сама функция автоматического запуска видео:

function videoautoplay(event) {
	$('video').trigger('play');
}

Попадалось решение в виде такого параметра, но оно у меня не сработало:

afterAction: function(current) {
	current.find('video').get(0).play();
}

Адаптивность

responsive : {
	// ширина больше 0
	0 : {
		margin:10,
	},
	// ширина больше 480
	481 : {
		margin:15,
	},
	// ширина больше 1024
	1025 : {
		margin:30,
	}
}

Равная высота блоков

.owl-carousel .owl-stage {
  display: flex;
}
.owl-carousel .owl-item {
  display: flex;
  flex: 1 0 auto;
}

Хэш ссылки и dots с содержимым

jQuery('#guestbook').owlCarousel({
	items:1,
	loop:false,
	margin:100,
	nav:false,
	dots:true,
	dotsData:true,
	lazyLoad:false,
	smartSpeed:500,
	autoHeight:true,
	autoplay:false,	
	URLhashListener:true,
	startPosition: 'URLHash',
});
<?php $page_children = new WP_Query(array(
	'post_type' => 'page',
	'post_parent' => get_the_ID(),
	'orderby' => 'menu_order',
	'order' => 'ASC'	
) ); ?>

<?php if($page_children->have_posts()) : ?>
	<?php $i = 1; ?>
	<div id="guestbook" class="owl-carousel owl-theme">	
	<?php while($page_children->have_posts()): $page_children->the_post();

	echo '<div class="item" data-dot="<button><span>стр. </span>'.$i.'</button>" data-hash="'.$i.'"><h1>'.get_the_title().'</h1>'.get_the_content().'</div>
	';
	$i++;

	endwhile; ?>
	</div>	
<?php endif; wp_reset_query(); ?>

Получится примерно следующее

Размер слайдов по горизонтали

Слайды можно кратно увеличивать по ширине. Для этого нужно добавить элементам .item атрибут data-merge

<div class="owl-carousel owl-theme">
    <div class="item" data-merge="1"><h2>1</h2></div>
    <div class="item" data-merge="2"><h2>2</h2></div>
    <div class="item" data-merge="1"><h2>3</h2></div>
    <div class="item" data-merge="3"><h2>4</h2></div>
    <div class="item" data-merge="6"><h2>6</h2></div>
</div>

И они в зависимости от индекса будут занимать столько же «блоков». В скрипте карусели должен быть включен атрибут mergeFit: true

Сброс таймера autoplay

Общий скрипт для всех слайдеров Owl Corousel. Только для отслеживания события свайпа нужно привязать к инициализации слайдера функцию onDragged: resetTimeOut.

function resetTimeOut(event) {
	jQuery(event.target).trigger('stop.owl.autoplay');
	jQuery(event.target).trigger('play.owl.autoplay');
}

jQuery('.owl-carousel').on('click', '.owl-dots, .owl-nav', function(e) {
	jQuery(this).trigger('stop.owl.autoplay');
	jQuery(this).trigger('play.owl.autoplay');
});
[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Создание карусели Owl параметрами из HTML

Создание карусели Owl параметрами из HTML

Создадим универсальный скрипт создания Owl-карусели. Параметры для каждой отдельной карусели будут задаваться из атрибутов элемента самой карусели. Верстка Атрибуты нельзя оставлять пустыми. Если тот или иной атрибут не нужен лучше Читать далее »

ProgressBar для Owl.Carousel v.2

ProgressBar для Owl.Carousel v.2

Добавим к плагину карусели Owl Carousel (2 версии) progressbar при автоперемотке слайдов. Я наткнулся на 2 решения: попроще и посложнее. Вариант попроще Данное решение довольно примитивное. Необходимо самостоятельно добавлять к Читать далее »

Управление Owl-каруселью внешним интерфейсом

Управление Owl-каруселью внешним интерфейсом

Подключим к управлению Owl-каруселью различные варианты внешнего интерфейса. Кастомные стрелки навигации Кастомные стрелки навигации (чтобы, например, сделать их по ширине контейнера): Стандартные стрелки скрываем стилями. Скрипт управления: Можно использовать этот Читать далее »

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

Пока нет комментариев. Будь первым!

Owl Carousel Owl Carousel Owl Carousel Owl Carousel
Серверные технологии
Рекомендации для васСерверные технологииOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.