/ Scripts & jquery / Owl Carousel

Owl Carousel

HIT

21.02.2020

3928

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

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

  • Есть возможность формировать хэш-ссылки для слайдов
  • Работает более быстро и стабильно
  • Нормально реализован Lazyload
  • Есть функция возврата (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');
});

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
ProgressBar для Owl.Carousel v.2

ProgressBar для Owl.Carousel v.2

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

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

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

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

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

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

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

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

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

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