我正在使用猫头鹰旋转木马,我相信“autoplay”参数中存在一些错误。根据下面的示例,您将看到动画将转向相反的一侧。但是当我们调整窗口大小时,它会朝着正确的方向前进。由于这一点,这些点也很奇怪。
任何人都可以帮我解决这个问题吗?
以下是工作示例: https://jsfiddle.net/alysonsm/17xf4Lvw/1/
以下是代码:
$('.owl-carousel').owlCarousel({
loop: true,
dots: true,
margin: 25,
autoplayTimeout: 6000,
autoplaySpeed: 1000,
autoplayHoverPause: true,
autoplay: true,
responsive: {
0: {
items: 2,
slideBy: 1
},
600: {
items: 4,
slideBy: 1
},
1000: {
items: 6,
slideBy: 6
}
}
});
.owl-dots {
text-align: center;
margin-top: 20px;
margin-bottom: 5px; }
.owl-item {
overflow: hidden; }
.owl-dots > .owl-dot {
background: #656565;
border-radius: 50%;
height: 10px;
width: 10px;
display: inline-block;
margin: 4px; }
.owl-dots > .active {
background: #e31b23 !important; }
<link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://raw.githubusercontent.com/OwlCarousel2/OwlCarousel2/develop/dist/owl.carousel.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
<div>
<img src="http://placehold.it/150x150?text=Slide+1" alt="Testing Slides">
</div>
<div>
<img src="http://placehold.it/150x150?text=Slide+2" alt="Testing Slides">
</div>
<div>
<img src="http://placehold.it/150x150?text=Slide+3" alt="Testing Slides">
</div>
<div>
<img src="http://placehold.it/150x150?text=Slide+4" alt="Testing Slides">
</div>
<div>
<img src="http://placehold.it/150x150?text=Slide+5" alt="Testing Slides">
</div>
<div>
<img src="http://placehold.it/150x150?text=Slide+6" alt="Testing Slides">
</div>
<div>
<img src="http://placehold.it/150x150?text=Slide+7" alt="Testing Slides">
</div>
<div>
<img src="http://placehold.it/150x150?text=Slide+8" alt="Testing Slides">
</div>
</div>
答案 0 :(得分:1)
我修复的方式是与事件合作, 'translated.owl.carousel'和触发器,如'next.owl.carousel'和'prev.owl.carousel'。所以我实现了下面的解决方法:
https://jsfiddle.net/alysonsm/17xf4Lvw/3/
var $owlCarousel = $('.owl-carousel');
$owlCarousel.owlCarousel({
loop: false,
dots: true,
margin: 25,
responsive: {
0: {
items: 2,
slideBy: 2
},
600: {
items: 4,
slideBy: 4
},
1000: {
items: 6,
slideBy: 6
}
}
});
var sleepTimeOut = 5000;
var transitionSpeedTime = 1000;
var direction = 'next';
var owlTimer;
moveToNextSlide(transitionSpeedTime, sleepTimeOut);
$owlCarousel.on('translated.owl.carousel', function () {
moveToNextSlide(transitionSpeedTime, sleepTimeOut);
});
$owlCarousel.on('mouseover', function () {
window.clearTimeout(owlTimer);
});
$owlCarousel.on('mouseout', function () {
moveToNextSlide(transitionSpeedTime, sleepTimeOut);
});
function moveToNextSlide(autoplayTimeout, autoplaySpeed) {
window.clearTimeout(owlTimer);
owlTimer = window.setTimeout(function () {
setSlideDirection();
$owlCarousel.trigger(direction + '.owl.carousel', [autoplayTimeout]);
}, autoplaySpeed);
}
function setSlideDirection() {
// Change the direction the next slide when in first slide.
if ($('.owl-stage > .owl-item').first().is('.active')) {
direction = 'next';
}
// Change the direction the previous slide when in last slide.
if ($('.owl-stage > .owl-item').last().is('.active')) {
direction = 'prev';
}
}