Сова Карусель с эффектом затухания не работает с помощью animate.css - PullRequest
Новая
       9

Сова Карусель с эффектом затухания не работает с помощью animate.css

0 голосов
/ 18 октября 2018

Я использую ползунок OwlCarousel2 (https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html). Мне нужен эффект плавного затухания изображения. Я пытался использовать animate.css, но он не работает. Он продолжает скользить справа налево.

Я пытался transitionStyle: "fade",, но он не работает должным образом.

Я не знаю, в чем я не прав. Вы можете мне помочь?

Не могли бы вы помочь мне в этом? 

$(document).ready(function() {
  $('#main-slide').owlCarousel({

    navigation: true,
    // navigationText: ["", ""],
    slideSpeed: 300,
    paginationSpeed: 400,
    autoPlay: true,
    mouseDrag: true,
    singleItem: true,
    animateIn: 'fadeIn', // add this
    animateOut: 'fadeOut', // and this
    responsiveClass: true,

    responsive: {
      0: {
        items: 1
        // nav:true
      },
      600: {
        items: 1,
        nav: false
      },
      1000: {
        items: 1,
        nav: true,
        loop: false
      }
    }
  });


});
body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.owl-carousel {
  position: relative;
  height: 100%;
}

.owl-carousel div:not(.owl-controls) {
  height: 100%;
}

.owl-carousel .slide-img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
<div id="main-slide" class="owl-carousel owl-theme">
  <div class="item">
    <div class="slide-img" style="background-image:url('https://images.unsplash.com/photo-1531535807748-218331acbcb4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=851afba7f7b48463e9e11553289b6a8f&auto=format&fit=crop&w=1567&q=80');"></div>
  </div>
  <div class="item">
    <div class="slide-img" style="background-image:url('https://images.unsplash.com/photo-1531545514256-b1400bc00f31?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f168e050241c6c8041b0e9ccf98eefb9&auto=format&fit=crop&w=667&q=80');"></div>
  </div>

  <div class="item">
    <div class="slide-img" style="background-image:url('https://images.unsplash.com/photo-1531496635011-06e2870a6722?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9dcbf2254660dff23e2da5ffe9a8eff8&auto=format&fit=crop&w=667&q=80');"></div>

  </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

1 Ответ

0 голосов
/ 18 октября 2018

Наконец-то я нашел свой ответ.

Я использовал OwlCarousel2 версии 1.3.3.Теперь я обновил версию с 1.3.3 до Owl Carousel v2.3.4, и она работает.

CSS 

<link rel="stylesheet" type="text/css" href="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">

Скрипт 

<script type="text/javascript" src="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>


$(document).ready(function() {
  $('#main-slide').owlCarousel({
    loop: true,
    margin: 10,
    slideSpeed: 300,
    paginationSpeed: 400,
    autoplay: true,
    // autoplayHoverPause:true,
    items: 1,
    animateIn: 'fadeIn', // add this
    animateOut: 'fadeOut', // and this
    responsiveClass: true,

    responsive: {
      0: {
        items: 1
        // nav:true
      },
      600: {
        items: 1,
        nav: false
      },
      1000: {
        items: 1,
        nav: true
        // loop:false
      }
    }
  });


});
body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.owl-carousel {
  position: relative;
  height: 100%;
}

.owl-carousel div:not(.owl-controls) {
  height: 100%;
}

.owl-carousel .slide-img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
<link rel="stylesheet" type="text/css" href="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
<div id="main-slide" class="owl-carousel owl-theme">
  <div class="item">
    <div class="slide-img" style="background-image:url('https://images.unsplash.com/photo-1531535807748-218331acbcb4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=851afba7f7b48463e9e11553289b6a8f&auto=format&fit=crop&w=1567&q=80');"></div>
  </div>
  <div class="item">
    <div class="slide-img" style="background-image:url('https://images.unsplash.com/photo-1531545514256-b1400bc00f31?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f168e050241c6c8041b0e9ccf98eefb9&auto=format&fit=crop&w=667&q=80');"></div>
  </div>

  <div class="item">
    <div class="slide-img" style="background-image:url('https://images.unsplash.com/photo-1531496635011-06e2870a6722?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9dcbf2254660dff23e2da5ffe9a8eff8&auto=format&fit=crop&w=667&q=80');"></div>

  </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
...