javascript 猫头鹰轮播滚动到点击的项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29748995/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
owl carousel scroll to clicked item
提问by Mario
I have a simple owl-carousel,
我有一个简单的猫头鹰旋转木马，
HTML:
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:
JavaScript：
$('.owl-carousel').owlCarousel({
items: 5,
loop:true,
nav:true,
margin: 10
})
Included:
包括：
- owl.carousel.js
- owl.carousel.min.css
- owl.carousel.js
- owl.carousel.min.css
JSFiddle http://jsfiddle.net/93cpX/62/
JSFiddle http://jsfiddle.net/93cpX/62/
How to force the carousel scroll to the clicked item?
如何强制轮播滚动到单击的项目？
采纳答案by Legendary
<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>
There are was few trouble with version, and thats why i send you full html page - try it to yourself!
版本几乎没有问题，这就是为什么我向您发送完整的 html 页面 - 自己尝试一下！
回答by Konstantin.Z
You can try next code:
您可以尝试下一个代码：
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);
});
回答by Lokesh thakur
Try this one>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
试试这个>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
$('button').trigger('to.owl.carousel', 1);
回答by Fabii
None of the above worked for me , I just ended up storing the index of the last clicked item, and executing the following code :
以上都不适合我，我只是最终存储了上次单击项目的索引，并执行以下代码：
//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');
}
Please note: My use case was a little bit different, I have multiple carousels stacked vertically. It would store index and the carousel id when an item was clicked. When the user navigated away and back to the original page, it would auto scroll to the correct carousel and carousel item.**
请注意：我的用例有点不同，我有多个垂直堆叠的传送带。单击项目时，它将存储索引和轮播 ID。当用户离开并返回原始页面时，它会自动滚动到正确的轮播和轮播项目。**
//Scroll to last selected carousel
//滚动到最后选择的轮播
$('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');
}
