OwlCarousel2 анимированные точки на изменение - PullRequest
Новая
       36

OwlCarousel2 анимированные точки на изменение

3 голосов
/ 16 мая 2019

Я хотел бы сделать точки в сове-карусели анимированными, как индикатор выполнения для каждого элемента карусели, я использую простую функцию JQuery для анимации, которая называется событием onChange. Но проблема в том, что эта функция вызывается до изменения структуры HTML.

CSS для точек: 

.owl-theme .owl-dots .owl-dot{
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    width: 100px;
    height: 5px;
    margin-left: 2px;
    margin-right: 2px;
    background: #ccc;
    border:none;
}

 .owl-theme .owl-dots .owl-dot span {
    margin: 0;
    background: white;
    width:0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    height: 5px;
}

 .owl-theme .owl-dots .owl-dot.active span {
    background: white;
    width:0px;
}

JS 

$(carousel).owlCarousel({
        slideSpeed: 500,
        paginationSpeed: 500,
        singleItem: true,
        navigation: true,
        items: 1,
        autoplay:false,
        loop:true,
        autoplayTimeout:2000,
        onChange:navigationFill,

    });



 function navigationFill() {    
        var progressbar = $(".owl-theme .owl-dots .owl-dot.active span");
        $(progressbar).animate({ width: "100%" }, 'slow');
    }

Этот код работает только тогда, когда карусель изменяется на следующем элементе, но анимация выполняется для предыдущей точки. Есть ли способ, как я могу «приостановить» этот JS, подождать, пока структура HTML не изменится и после этого вызвать эту функцию?

JSFIDDLE https://jsfiddle.net/nxa36myc/29/ (предыдущая черная «точка навигации» меняется на белый при смене слайда)

1 Ответ

1 голос
/ 16 мая 2019

Я создал скрипку на основе вашего вопроса здесь https://jsfiddle.net/mazinoukah/m45hx3v2/3/

В основном я добавил класс 'owl-theme' в контейнер owl-carousel.

Также я удалилОпция 'onChange' и добавленный слушатель, 'change.owl.carousel', к экземпляру совы.

HTML 

<div class="wrapper">
<div class="owl-carousel owl-theme">
    <div class="item"><img src="http://shrani.si/f/1W/4U/KrJheJj/tine.jpg"></div>
    <div class="item"><img src="http://shrani.si/f/3A/q3/kC00r7/torbice.jpg"></div>
     <div class="item padded"><img src="http://shrani.si/f/2o/hl/1xmizZhJ/medvedki.jpg"></div>
    <div class="item padded"><img src="http://shrani.si/f/27/wV/4moHQxYk/maladva.jpg"></div>
</div>
<div id="nav"></div>

CSS 

body {
    background: #fff;
}

.owl-carousel .item {
    background: #ccc;
    text-align: center;
    height: 450px;
}

.wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.padded {
    line-height: 450px;
}

#nav {
    position: relative;
}



#nav > div {
    font-size: 28px;
    position: absolute;
    top: -250px;
    z-index: 2;
    cursor: pointer;
    padding: 0 5px;
    visibility: hidden;
}

.wrapper:hover #nav > div {
    visibility: visible;
}

.owl-prev {
    left: 0;
}

.owl-next {
    right: 0;
}

.owl-theme .owl-dots .owl-dot{
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    width: 100px;
    height: 5px;
    margin-left: 2px;
    margin-right: 2px;
    background: #ccc;
    border:none;
}

 .owl-theme .owl-dots .owl-dot span {
    margin: 0;
    background: white;
    width:0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    height: 5px;
}

 .owl-theme .owl-dots .owl-dot.active span {
    background: white;
    width:0px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JAVASCRIPT 

 var owl = $(".owl-carousel").owlCarousel({
    slideSpeed: 500,
    paginationSpeed: 500,
    singleItem: true,
    navigation: true,
    items: 1,
    autoplay:true,
    loop:true,
    autoplayTimeout:2000,
navText: [
    '<i class="fa fa-angle-left"></i>',
    '<i class="fa fa-angle-right"></i>'
],
  responsive:{
    0:{
        items:1
    },
    767:{
        items:1,
        nav:true
    }
}

}); 

owl.on('changed.owl.carousel', function(event) {
    navigationFill();
})

function navigationFill() {  

    // Reset the width of all the 'dots'
    var pr = $(".owl-theme .owl-dots .owl-dot span");
    $(pr).css({ width: "0%" });

    var progressbar = $(".owl-theme .owl-dots .owl-dot.active span");
    $(progressbar).animate({ width: "100%" }, 'slow');

}

Дайте мне знать, если у вас есть какие-либо вопросы, или вам нужна дополнительная помощь.Надеюсь, это поможет:)

...