不能在页面上使用两个以上的猫头鹰轮播 2 缩略图

Question

我正在使用带有缩略图的猫头鹰carosual2滑块。如果任何用户单击缩略图，则滑块将滑动。 现在我的问题是，我无法在单个页面上正确使用多个滑块。我的意思是，如果我单击第一个滑块缩略图，它会自动滑动第二个滑块缩略图。

我从这里找到了缩略图代码 http://jsfiddle.net/moyarich/mmtLcz6u/13/

var sync1 = $(".slider");
var sync2 = $(".navigation-thumbs");
var thumbnailItemClass = '.owl-item';
var slides = sync1.owlCarousel({
//video:true,
startPosition: 12,
items: 1,
loop: true,
margin: 10,
//autoplay:true,
//autoplayTimeout:6000,
mouseDrag: true,
touchDrag: true,
pullDrag: false,
scrollPerPage: true,
autoplayHoverPause: false,
nav: false,
dots: true
}).on('changed.owl.carousel', syncPosition);
function syncPosition(el) {
$owl_slider = $(this).data('owl.carousel');
var loop = $owl_slider.options.loop;
if (loop) {
var count = el.item.count - 1;
var current = Math.round(el.item.index - (el.item.count / 2) - .5);
if (current < 0) {
current = count;
}
if (current > count) {
current = 0;
}
} else {
var current = el.item.index;
}
var owl_thumbnail = sync2.data('owl.carousel');
var itemClass = "." + owl_thumbnail.options.itemClass;
var thumbnailCurrentItem = sync2
.find(itemClass)
.removeClass("synced")
.eq(current);
thumbnailCurrentItem.addClass('synced');
if (!thumbnailCurrentItem.hasClass('active')) {
var duration = 300;
sync2.trigger('to.owl.carousel', [current, duration, true]);
}
}
var thumbs = sync2.owlCarousel({
startPosition: 12,
items: 4,
loop: false,
margin: 10,
autoplay: false,
nav: false,
dots: false,
onInitialized: function(e) {
var thumbnailCurrentItem = $(e.target).find(thumbnailItemClass).eq(this._current);
thumbnailCurrentItem.addClass('synced');
},
})
.on('click', thumbnailItemClass, function(e) {
e.preventDefault();
var duration = 300;
var itemIndex = $(e.target).parents(thumbnailItemClass).index();
sync1.trigger('to.owl.carousel', [itemIndex, duration, true]);
}).on("changed.owl.carousel", function(el) {
var number = el.item.index;
$owl_slider = sync1.data('owl.carousel');
$owl_slider.to(number, 100, true);
});

.sliderContent {
margin-top: 40px;
}
.active.synced h2 {
color: red;
}

<link rel="stylesheet" href="https://cdn.bootcss.com/OwlCarousel2/2.2.1/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/OwlCarousel2/2.2.1/assets/owl.theme.default.css">
<div id="sync1" class="slider owl-carousel sliderContent">
<div class="item">
<h2>Test content 1</h2>
</div>
<div class="item">
<h2>Test content 2</h2>
</div>
<div class="item">
<h2>Test content 3</h2>
</div>
</div>
<div id="sync2" class="navigation-thumbs owl-carousel">
<div class="item">
<h2>Thumnail 1</h2>
</div>
<div class="item">
<h2>Thumnail 2</h2>
</div>
<div class="item">
<h2>Thumnail 3</h2>
</div>
</div>
<div id="sync3" class="slider owl-carousel sliderContent">
<div class="item">
<h2>Test content 4</h2>
</div>
<div class="item">
<h2>Test content 5</h2>
</div>
<div class="item">
<h2>Test content 6</h2>
</div>
</div>
<div id="sync4" class="navigation-thumbs owl-carousel">
<div class="item">
<h2>Thumnail 4</h2>
</div>
<div class="item">
<h2>Thumnail 5</h2>
</div>
<div class="item">
<h2>Thumnail 6</h2>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/OwlCarousel2/2.2.1/owl.carousel.js"></script>

Answer 1

我已经更新了您的脚本，允许在单个页面上运行多个滑块，研究 Javascript 上的循环和变量范围

演示网址： http://jsfiddle.net/HoangHieu/y8w9mrLa/8/

$('.sync').each(function(){ //Updated Here
	(function(_e){ //Updated Here
var sync1 = $(_e).find(".slider");
var sync2 = $(_e).find(".navigation-thumbs");
var thumbnailItemClass = '.owl-item';
var slides = sync1.owlCarousel({
video:true,
startPosition: 12,
items:1,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:6000,
autoplayHoverPause:false,
nav: false,
dots: true
}).on('changed.owl.carousel', syncPosition);
function syncPosition(el) {
$owl_slider = $(this).data('owl.carousel');
var loop = $owl_slider.options.loop;
if(loop){
var count = el.item.count-1;
var current = Math.round(el.item.index - (el.item.count/2) - .5);
if(current < 0) {
current = count;
}
if(current > count) {
current = 0;
}
}else{
var current = el.item.index;
}
var owl_thumbnail = sync2.data('owl.carousel');
var itemClass = "." + owl_thumbnail.options.itemClass;
var thumbnailCurrentItem = sync2
.find(itemClass)
.removeClass("synced")
.eq(current);
thumbnailCurrentItem.addClass('synced');
if (!thumbnailCurrentItem.hasClass('active')) {
var duration = 300;
sync2.trigger('to.owl.carousel',[current, duration, true]);
}   
}
var thumbs = sync2.owlCarousel({
startPosition: 12,
items:4,
loop:false,
margin:10,
autoplay:false,
nav: false,
dots: false,
onInitialized: function (e) {
var thumbnailCurrentItem =  $(e.target).find(thumbnailItemClass).eq(this._current);
thumbnailCurrentItem.addClass('synced');
},
})
.on('click', thumbnailItemClass, function(e) {
e.preventDefault();
var duration = 300;
var itemIndex =  $(e.target).parents(thumbnailItemClass).index();
sync1.trigger('to.owl.carousel',[itemIndex, duration, true]);
}).on("changed.owl.carousel", function (el) {
var number = el.item.index;
$owl_slider = sync1.data('owl.carousel');
$owl_slider.to(number, 100, true);
});
})(this);  //Updated Here
});

.sync .item{
background: #0c83e7;
padding: 80px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
.sync .item{
background: #C9C9C9;
padding: 10px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
cursor: pointer;
}
.sync.item h1{
font-size: 18px;
}
.sync .synced .item{
background: #0c83e7;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/OwlCarousel2/2.2.1/assets/owl.theme.default.css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/OwlCarousel2/2.2.1/owl.carousel.js"></script>
<link href="https://cdn.bootcss.com/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet"/>
<div class="sync">
<div id="sync1" class="slider owl-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
</div>
<div id="sync2" class="navigation-thumbs owl-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
</div>
</div>
<div class="sync">
<div id="sync3" class="slider owl-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
</div>
<div id="sync4" class="navigation-thumbs owl-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
</div>
</div>