猫头鹰轮播的问题始于延迟

debugcn 发表于 Dev

用户名

<!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,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,0);
-moz-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,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>

嗨！我对这个猫头鹰传送带的延迟有一个问题。如您所见，此猫头鹰轮播在6秒后播放。

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

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

Swaraj甘地

您必须使用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上查看“自动播放”部分

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。