我有一个简单的猫头鹰旋转木马,
HTML:
<div class="owl-carousel">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
JavaScript的:
$('.owl-carousel').owlCarousel({
items: 5,
loop:true,
nav:true,
margin: 10
})
包括:
JSFiddle http://jsfiddle.net/93cpX/62/
如何强制轮播滚动到点击的项目?
答案 0 :(得分:6)
<html>
<head>
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<style>
.owl-carousel .item {
height: 80px;
background: #4DC7A0;
}
</style>
</head>
<body>
<div id="owl-demo">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
items : 5, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
// Custom Navigation Events
$(document).on('click', '.owl-item', function(){
n = $(this).index();
console.log(n)
$('.owl-wrapper').trigger('owl.goTo', n);
});
});
</script>
</body>
</html>
版本没什么问题,这就是为什么我给你发送完整的html页面 - 试试吧!
答案 1 :(得分:1)
您可以尝试下一个代码:
var sync2 = jQuery('.sync2').owlCarousel({
loop:true,
margin:0,
nav:false,
dots:false,
responsive:{
0:{
items:4
}
},
center: false,
navText: ["",""],
linked: ".sync1"
});
sync2.on('click', '.owl-item', function(event) {
var target = jQuery(this).index();;
sync2.owlCarousel('current',target);
});
答案 2 :(得分:0)
尝试这一个&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT ;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;
$('button').trigger('to.owl.carousel', 1);
答案 3 :(得分:0)
以上都不适合我,我最后只是存储了最后单击的项目的索引,并执行以下代码:
//Select by id if one is set or via '$("".owl-carousel)'
var $carouselElement = $('#owl_carousel_id')
for(var i =0; i<lastClickedIndex; i++ ){
$carouselElement.trigger('next.owl.carousel');
}
请注意:我的用例有些不同,我有多个垂直堆叠的轮播。单击某个项目时,它将存储索引和轮播ID。当用户导航离开并返回原始页面时,它将自动滚动到正确的轮播和轮播项目。**
//滚动到最后选择的轮播
$('html,body').animate({scrollTop: $carouselElement.offset().top},'fast');
//scroll to last clicked item
for(var i =0; i<lastClickedIndex; i++ ){
$carouselElement.trigger('next.owl.carousel');
}