owl-carousel 的问题始于延迟

编程问答 2022-05-31

问题描述

<!DOCTYPE html>
<html lang="en" >
<head>
  <Meta charset="UTF-8">
  <title>CodePen - Owl Carousel 2 Navigation on Sides - Left and Right</title>

<style>

.main-content {
  position: relative;
}
.main-content .owl-theme .custom-nav {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
}
.main-content .owl-theme .custom-nav .owl-prev,.main-content .owl-theme .custom-nav .owl-next {
  position: absolute;
  height: 100px;
  color: inherit;
  background: none;
  border: none;
  z-index: 100;
}
.main-content .owl-theme .custom-nav .owl-prev i,.main-content .owl-theme .custom-nav .owl-next i {
  font-size: 2.5rem;
  color: #cecece;
}
.main-content .owl-theme .custom-nav .owl-prev {
  left: 0;
}
.main-content .owl-theme .custom-nav .owl-next {
  right: 0;
}

.owl-carousel,.owl-carousel .owl-item
{-webkit-tap-highlight-color:transparent;
position:relative}

.owl-carousel
{display:none;
width:100%;
z-index:1}

.owl-carousel .owl-stage
{position:relative;
-ms-touch-action:pan-Y;
touch-action:manipulation;
-moz-backface-visibility:hidden}

.owl-carousel .owl-stage:after
{content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0}

.owl-carousel .owl-stage-outer
{position:relative;
overflow:hidden;
-webkit-transform:translate3d(0,0)}

.owl-carousel .owl-item,.owl-carousel .owl-wrapper
{-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-webkit-transform:translate3d(0,0);
-moz-transform:translate3d(0,0);
-ms-transform:translate3d(0,0)}

.owl-carousel .owl-item
{min-height:1px;
float:left;
-webkit-backface-visibility:hidden;
-webkit-touch-callout:none}


.owl-carousel .owl-item img
{display:block;
width:100%}

.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled
{display:none}

.no-js .owl-carousel,.owl-carousel.owl-loaded
{display:block}

.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev
{cursor:pointer;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none}

.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot
{background:0 0;
color:inherit;
border:none;
padding:0!important;
font:inherit}

.owl-carousel.owl-loading
{opacity:0;
display:block}

.owl-carousel.owl-hidden
{opacity:0}

.owl-carousel.owl-refresh .owl-item
{visibility:hidden}

.owl-carousel.owl-drag .owl-item
{-ms-touch-action:pan-y;
touch-action:pan-y;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none}

.owl-carousel.owl-grab
{cursor:move;
cursor:grab}

.owl-carousel.owl-rtl
{direction:rtl}

.owl-carousel.owl-rtl .owl-item
{float:right}

.owl-carousel .animated
{animation-duration:1s;
animation-fill-mode:both}

.owl-carousel .owl-animated-in
{z-index:0}

.owl-carousel .owl-animated-out
{z-index:1}

.owl-carousel .fadeOut
{animation-name:fadeOut}

@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}

.owl-height{transition:height .5s ease-in-out}

.owl-carousel .owl-item .owl-lazy
{opacity:0;
transition:opacity .4s ease}

.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}

.owl-carousel .owl-item img.owl-lazy
{transform-style:preserve-3d}

.owl-carousel .owl-video-wrapper
{position:relative;
height:100%;
background:#000}

.owl-carousel .owl-video-play-icon
{position:absolute;
height:80px;
width:80px;
left:50%;
top:50%;
margin-left:-40px;
margin-top:-40px;
background:url(owl.video.play.png) no-repeat;
cursor:pointer;
z-index:1;
-webkit-backface-visibility:hidden;
transition:transform .1s ease}

.owl-carousel .owl-video-play-icon:hover
{-ms-transform:scale(1.3,1.3);
transform:scale(1.3,1.3)}

.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn
{display:none}

.owl-carousel .owl-video-tn
{opacity:0;
height:100%;
background-position:center center;
background-repeat:no-repeat;
background-size:contain;
transition:opacity .4s ease}

.owl-carousel .owl-video-frame
{position:relative;
z-index:1;
height:100%;
width:100%}

</style>


</head>
<body>
<!-- partial:index.partial.html -->
   <div class="owl-carousel">
    <div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>
    <div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>
    <div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>
    <div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>
    <div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>
    <div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>
    <div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>
    <div class="item"><img class="img-clients" src="https://www.rakuten.ne.jp/gold/sappun/6.jpg" alt="" ></div>
    </div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>

<script>
$(document).ready(function (){
          $('.owl-carousel').owlCarousel({
        loop: true,items: 4,autoplay: true,slideTransition: 'linear',autoplaySpeed: 6000,smartSpeed: 6000,loop:true,autoplayHoverPause: false,center: true,});



        setTimeout(setSpeed,1000);
    });
</script>

</body>
</html>

嗨！我在这个 owl-carousel 中遇到了一个延迟问题。 如您所见，此猫头鹰轮播在 6 秒后播放。

即使我将“autoplaySpeed”和“smartSpeed”更改为1000， 6 秒后它仍然播放。 那么有没有办法让它在开始时没有任何延迟地播放？

任何帮助将不胜感激！谢谢！ :D

解决方法

您必须使用 autoplayTimeout 属性。 此外，我添加了一个逻辑，它将在第一次渲染后更新 autoplayTimeout。

JS：

var $carousel = $(".owl-carousel");
$carousel.owlCarousel({
  loop: true,items: 1,autoplay: true,slideTransition: "linear",autoplayTimeout: 1000,/*(ms you want)*/
  loop: true,autoplayHoverPause: false,center: true,});

setTimeout(() => {
  var carouselData = $carousel.data();
  var carouselOptions = carouselData['owl.carousel'].options;
    carouselOptions.autoplayTimeout = 6000;
  $carousel.trigger('refresh.owl.carousel');
},1000);

您可以查看文档页面上的自动播放部分 https://owlcarousel2.github.io/OwlCarousel2/demos/autoplay.html

javascript