OwlCarousel2 动画点 onChange

Question

我想在 owl-carousel 中制作点动画，就像每个 carousel 项目的进度条一样，我使用简单的 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');
    }

此代码仅在轮播在下一个项目上发生变化时有效，但动画是为前一个点制作的。有什么办法，我怎么能"pause"这个JS，等到HTML结构改变后再调用这个函数？

JSFIDDLE https://jsfiddle.net/nxa36myc/29/（之前的黑色"navigation dot"在换幻灯片时变成白色）

Answer 1

我根据你在这里的问题创建了一个 fiddle https://jsfiddle.net/mazinoukah/m45hx3v2/3/

基本上我将 'owl-theme' class 添加到 owl-carousel 容器中。

此外，我删除了 'onChange' 选项并向 owl 实例添加了一个侦听器 'changed.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');

}

如果您有任何问题或需要进一步帮助，请告诉我。希望对您有所帮助:)

OwlCarousel2 动画点 onChange

OwlCarousel2 animated dots onChange

javascript

css

jquery

owl-carousel-2