Question

<section class="nb-our-clients row-fluid full-width">
   <div class="container-fluid">
      <div class="nb-our-clients-slider owl-carousel owl-theme">
         <div class="item">
            <div class="row">
               <div class="col-sm-6">
                  <div class="nb-our-clients-slider-image">
                     <img alt="" src="images/bike-image-2.jpg">
                  </div>
               </div>
               <div class="col-sm-6">
                  <div class="nb-our-clients-slider-text">
                     <p> Crafting a storytelling experience </p>
                  </div>
               </div>
            </div>
         </div>
         <div class="item">
            <div class="row">
               <div class="col-sm-6">
                  <div class="nb-our-clients-slider-image">
                     <img alt="" src="images/bike-image-2.jpg">
                  </div>
               </div>
               <div class="col-sm-6">
                  <div class="nb-our-clients-slider-text">
                     <p> Crafting a storytelling experience </p>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="counter"></div>
   </div>
</section>


jQuery(function() {
    var owl = jQuery('.nb-our-clients-slider').owlCarousel({
        loop: false,
        center: true,
        dots: false,
        margin: 0,
        items: 1,
        thumbs: false,
        nav: true,
        onInitialized: counter,
        onTranslated: counter
    });



    function counter(event) {
        var element = event.target;
        var items = event.item.count;
        var item = event.item.index + 1;
        jQuery('.counter').html(item + " / " + items)


    }

});

.nb-our-clients {
    background: #219abc;
}

.nb-our-clients .container-fluid {
    position: relative;
}

.nb-our-clients .counter {
    position: absolute;
    left: 20px;
    bottom: -50px;
}

.nb-our-clients .owl-nav {
    position: absolute;
    right: 20px;
    bottom: -50px;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    outline: none !important;
}

大家好，我正在尝试创建具有新互动功能的猫头鹰轮播滑块。要再做一件事，我需要您的帮助。我需要在滑块的底部添加一行。我们知道每张幻灯片都会有一个间隔，因此在此间隔中，线条的背景应该发生变化。请检查此链接以获取更多详细信息。 https://www.uber.design/team-请参阅团队部分

我还在上面附加了我的代码。请帮我。谢谢：）

我的测试链接：http://dev.netbramha.in/projects/owl-test/

互动的原始链接：https://www.uber.design/team-请参见团队部分

猫头鹰旋转木马动画

0 个答案: