Question

我正在使用Owl-carousel，而我的幻灯片有问题，在我调整浏览器窗口大小后，它们消失了。在此处查看行为：https://vimeo.com/335803613 该网站是：http://divcake.com/template2/ 我相信这与项目内部的CSS动画有关，因为当我禁用淡入淡出动画时，一切正常。请帮助解决此问题。谢谢。

   <script>
      
  <!-- //Start Hero slider control panel

    var owl = $('.owl-carousel').owlCarousel({
    animateOut: 'fadeOut',
    animateIn: 'fadeIn',
    
    autoplayTimeout: 2000,
    autoplayHoverPause: true,
    loop: true,
    margin: 0,
    nav: false,
    mouseDrag:true,
    touchDrag:true,
    pullDrag:false,
    freeDrag:false,
    dots:false,
    autoplay: true,
    responsive: {
        0: {
            items: 1
        },
        600: {

            items: 1
        },
        1000: {
            items: 1
        }
    }
});
 // End Hero slider control panel
 
// Start Reactivate css animation every time a slide is loaded 

      owl.on('change.owl.carousel', function (event) {
    var el = event.target;
    $('h1', el).addClass('fadeInUp animated')
            .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
                $('h1', el).removeClass('fadeInUp animated');
            });

             $('.anim1', el).addClass('fadeInUp animated')
            .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
                $('.anim1', el).removeClass('fadeInUp animated');
            });
        });

  // Start Reactivate css animation every time a slide is loaded 
      </script>

/*Start hero slider*/

.owl-carousel .owl-item {
    -webkit-animation-duration: .7s !important;
    animation-duration: .7s !important;
}

.padding_zero {overflow:hidden; padding:0; margin-top:-35px; border-top:solid 2px #f8f9fa;}


.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:100%;
}

.fadeInUp {
animation-duration: 1s;
animation-delay: .1s;
}

<!-- Start Hero slider -->
      <div class="container-fluid padding_zero">
        <div class="row justify-content-center ">
          
          <div class="col-12  col-md-12 ">
            
            <div class="owl-carousel owl-theme">
              
              <div class="item " >
                <img src="images/girl2.jpg" alt="" >
                <div class="centered p-3  text-right col-12 item1"><h1 class="fadeInUp mr-2" >Lorem1 ipsum dolor sit..</h1>
                  <p class="fadeInUp anim1 mr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                   <a href="index.php" class="btn btn-default  d-md-inline-block px-3 pt-1 mr-2 fadeInUp anim1"  ><b>START PROIECT  </b> <i class="fas fa-caret-right fa-lg "></i></a>
                </div>
              </div>

              <div class="item  ">
                <img  src="images/office2.jpeg" alt="" >
                <div class="centered p-3  text-black text-center col-12 col-md-6 item2"><h1>Lorem2 ipsum dolor.</h1>
                  <p class="anim1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias alias assumenda impedit cumque beatae quas earum soluta omnis.</p>
                  <a href="index.php" class="btn btn-default px-3 pt-1 anim1 d-md-inline-block "><b>CONTACT</b></a>
                </div>
              </div>

               <div class="item  ">
                <img  src="images/forest1.jpg" alt="" >
                <div class="centered p-3 text-white text-center col-12 col-md-6 item3"><h1>Lorem3 ipsum dolor.</h1>
                  <p class="anim1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora obcaecati, recusandae porro.</p>
                  <a href="index.php" class="btn btn-default px-3 pt-1 d-md-inline-block anim1"><b>DETALII</b></a>
                </div>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </section>

<!-- End Hero Slider -->

Answer 1

我检查了所有猫头鹰轮播文件，它们都很好。现在，我终于解决了这个问题。 css动画重新激活代码是造成此问题的原因，我不太确定为什么。但是我已将其替换为另一个，看起来像这样：

 <script>
//Start Hero slider initialize code
$(document).ready(function(){
var heroSlider = $('.owl-carousel');
heroSlider.owlCarousel({
animateOut: 'fadeOut',
animateIn: 'fadeIn',
autoplayTimeout:3000,
autoplayHoverPause: true,
// smartSpeed :800,
loop: true,
margin: 0,
nav: false,
mouseDrag:true,
touchDrag:true,
pullDrag:false,
freeDrag:true,
dots:true,
autoplay:true,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
});
// End Hero slider initialize code
// Start Reactivate css animation every time a slide is loaded
heroSlider.on("changed.owl.carousel", function(event){
// selecting the current active item
var item = event.item.index-2;
// first removing animation for all captions
$('h1, p').removeClass('fadeInUp');
$('.owl-item').not('.cloned').eq(item).find('h1, p').addClass(' fadeInUp');
$('.anim1').removeClass('fadeInUp');
$('.owl-item').not('.cloned').eq(item).find('.anim1').addClass(' fadeInUp');
})
});
// End Reactivate css animation every time a slide is loaded
</script>

一切正常。在这里您可以看到滑块：http://divcake.com/template4/

调整窗口大小后，猫头鹰轮播幻灯片消失

1 个答案: