我正在使用WP,我想让我的旋转木马在最后一个项目之后连续滑动而不是自我重复。有没有办法做到这一点?
您可以在此处查看网站:http://desertcinema.com/#work
这是我在carousel.js下的代码
$(document).ready(function() {
var sync1 = $("#sync3");
var sync2 = $("#sync4");
sync1.owlCarousel({
singleItem : true,
slideSpeed : 1000,
transitionStyle : "fade",
navigation: false,
pagination:false,
afterAction : syncPosition,
responsiveRefreshRate : 200,
afterInit : progressBar,
afterMove : moved,
startDragging : pauseOnDragging
});
var time = 5; // time in seconds
var $progressBar,
$bar,
$elem,
isPause,
tick,
percentTime;
//Init progressBar where elem is $("#owl-demo")
function progressBar(elem){
$elem = elem;
//build progress bar elements
buildProgressBar();
//start counting
start();
}
//create div#progressBar and div#bar then prepend to $("#owl-demo")
function buildProgressBar(){
$progressBar = $("<div>",{
id:"progressBar"
});
$bar = $("<div>",{
id:"bar"
});
$progressBar.append($bar).prependTo($elem);
}
function start() {
//reset timer
percentTime = 0;
isPause = false;
//run interval every 0.01 second
tick = setInterval(interval, 10);
};
function interval() {
if(isPause === false){
percentTime += 1 / time;
$bar.css({
width: percentTime+"%"
});
//if percentTime is equal or greater than 100
if(percentTime >= 100){
//slide to next item
$elem.trigger('owl.next')
}
}
}
//pause while dragging
function pauseOnDragging(){
isPause = true;
}
//moved callback
function moved(){
//clear interval
clearTimeout(tick);
//start again
start();
}
有没有办法让图像连续旋转?
答案 0 :(得分:1)
将loop:true
添加到轮播选项中。 More info in docs.更改
sync1.owlCarousel({
singleItem : true,
slideSpeed : 1000,
transitionStyle : "fade",
navigation: false,
pagination:false,
afterAction : syncPosition,
responsiveRefreshRate : 200,
afterInit : progressBar,
afterMove : moved,
startDragging : pauseOnDragging
});
到
sync1.owlCarousel({
singleItem : true,
slideSpeed : 1000,
transitionStyle : "fade",
navigation: false,
pagination:false,
afterAction : syncPosition,
responsiveRefreshRate : 200,
afterInit : progressBar,
afterMove : moved,
startDragging : pauseOnDragging,
loop: true //added loop
});