- 首页
- 前端开发
- Owl Carousel 2:添加标题，点击并相应地移动到项目
Owl Carousel 2:添加标题，点击并相应地移动到项目
[英] Owl Carousel 2: Add title, click and move to item accordingly
本文介绍了Owl Carousel 2:添加标题，点击并相应地移动到项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Owl Carousel 2，居中.如图所示，我需要帮助.基本上我有 6 个项目，其中 2 个在同一类别下
- 标题 1:1 和 1a
- 标题 2:2 和 2a
- 标题 3:3 和 3a
当点击Title 1"时，它会移动到 1，而不是 1a，点击Title 2"；将移至 2，依此类推.
希望你们中的一些人能给我一些建议.谢谢！
$(document).ready(function($) {$('.loop').owlCarousel({中心:真实，项目:2，循环:真实，保证金:10，导航:真的，响应:{600:{项目:5}}});});
h4{边框:1px纯黑色；文本对齐:居中；}
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="样式表"/><link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script><a href="#" class="title1">标题 1</a><a href="#" class="title2">标题 2</a><a href="#" class="title3">标题 3</a><div class="loop owl-carousel owl-theme"><div class="item"><h4>1</h4>
<div class="item"><h4>1a</h4>
<div class="item"><h4>2</h4>
<div class="item"><h4>2a</h4>
<div class="item"><h4>3a</h4>
<div class="item"><h4>3</h4>
解决方案
以这种方式更改 Carousel 中的项目代码:
<div class="item"数据哈希=一个"><h4>1</h4>
<div class="item"><h4>1a</h4>
<div class="item"数据哈希=两个"><h4>2</h4>
<div class="item"><h4>2a</h4>
<div class="item"><h4>3a</h4>
<div class="item"数据哈希=三"><h4>3</h4>
标题以这种方式更改:
和Carousel这样初始化:
$(document).ready(function($) {$('.loop').owlCarousel({中心:真实，项目:2，循环:真实，保证金:10，导航:真的，URLhashListener: true,//1.添加了这个字符串startPosition: 'URLHash',//2.添加了这个字符串响应:{600:{项目:5}}});});
更多细节见官方文档:https://owlcarousel2.github.io/OwlCarousel2/演示/urlhashnav
I'm using Owl Carousel 2, center. I need help for something as shown on picture. Basically I have 6 items, 2 of them under same category
- Title 1: 1 and 1a
- Title 2: 2 and 2a
- Title 3: 3 and 3a
When click on "Title 1", it will move to 1, but not 1a, click on "Title 2" will move to 2 and so on.
Hoping that some of you could provide me with some advice. Thank you!
$(document).ready(function($) {
$('.loop').owlCarousel({
center: true,
items: 2,
loop: true,
margin: 10,
nav: true,
responsive: {
600: {
items: 5
}
}
});
});
h4{
border: 1px solid black;
text-align: center;
}
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<a href="#" class="title1">Title 1</a>
<a href="#" class="title2">TItle 2</a>
<a href="#" class="title3">TItle 3</a>
<div class="loop owl-carousel owl-theme">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>1a</h4>
</div>
<div class="item">
<h4>2</h4>
</div>
<div class="item">
<h4>2a</h4>
</div>
<div class="item">
<h4>3a</h4>
</div>
<div class="item">
<h4>3</h4>
</div>
</div>
解决方案
Change items code in your Carousel in this way:
<div class="loop owl-carousel owl-theme">
<div class="item" data-hash="one">
<h4>1</h4>
</div>
<div class="item">
<h4>1a</h4>
</div>
<div class="item" data-hash="two">
<h4>2</h4>
</div>
<div class="item">
<h4>2a</h4>
</div>
<div class="item">
<h4>3a</h4>
</div>
<div class="item" data-hash="three">
<h4>3</h4>
</div>
</div>
Titles change in this way:
<a href="#one" class="title1">Title 1</a>
<a href="#two" class="title2">TItle 2</a>
<a href="#three" class="title3">TItle 3</a>
And Carousel initialization in this way:
$(document).ready(function($) {
$('.loop').owlCarousel({
center: true,
items: 2,
loop: true,
margin: 10,
nav: true,
URLhashListener: true, //1. this string added
startPosition: 'URLHash', //2. this string added
responsive: {
600: {
items: 5
}
}
});
});
More details see in oficial docs: https://owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav
这篇关于Owl Carousel 2:添加标题，点击并相应地移动到项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
