猫头鹰轮播滚动到点击的项目 [英] owl carousel scroll to clicked item
问题描述
我有一个简单的猫头鹰旋转木马，
HTML:
<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>JavaScript:
$('.owl-carousel').owlCarousel({项目:5，循环:真，导航:真实，保证金:10})包括:
- owl.carousel.js
- owl.carousel.min.css
JSFiddle http://jsfiddle.net/93cpX/62/
如何强制轮播滚动到点击的项目?
<头><link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css"><风格>.owl-carousel .item {高度:80px；背景:#4DC7A0；}</风格><身体><div id="猫头鹰演示"><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><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,//1000px浏览器宽度以上的10个项目itemsDesktop : [1000,5],//1000px 到 901px 之间的 5 个项目itemsDesktopSmall : [900,3],//900px 和 601px 之间的 3 个项目itemsTablet: [600,2],//600 到 0 之间的 2 个项目；itemsMobile : false//itemsMobile 禁用 - 从 itemsTablet 选项继承});//自定义导航事件$(document).on('click', '.owl-item', function(){n = $(this).index();控制台日志(n)$('.owl-wrapper').trigger('owl.goTo', n);});});</html>
版本几乎没有问题，这就是为什么我向您发送完整的 html 页面 - 自己尝试！
I have a simple owl-carousel,
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
})
Included:
- owl.carousel.js
- owl.carousel.min.css
JSFiddle http://jsfiddle.net/93cpX/62/
How to force the carousel scroll to the clicked item?
<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!
这篇关于猫头鹰轮播滚动到点击的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
