Сова карусель анимация - PullRequest
Новая
       13

Сова карусель анимация

0 голосов
/ 10 января 2019 
<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 - СМ. РАЗДЕЛ КОМАНДЫ

...