Owl Carousel

21.02.2020

81

Разберем решение по созданию слайдеров и каруселей 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);
    });
});

Поделится информацией с друзьями

  • Комментарии
  • Вложения

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

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

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