Javascript 无法在页面上使用两个以上的owl carousel 2缩略图

我正在使用带缩略图的owl CAROSAL2滑块。如果任何用户单击缩略图，则滑块将滑动。现在我的问题是，我不能在一个页面上正确使用多个滑块。我的意思是，如果我点击第一个滑块缩略图，它会自动滑动第二个滑块缩略图

我在这里找到了缩略图代码

var sync1=$（“.slider”）；
var sync2=$（“.navigation thumbs”）；
var thumbnailItemClass='.owl item'；
var slides=sync1.owlCarousel({
//视频：没错，
起始位置：12，
项目：1，
循环：对，
差额：10，
//自动播放：对，
//自动播放超时：6000，
是的，
真的，
pullDrag:false，
是的，
自动播放暂停：false，
导航：错，
圆点：对
}).on（'changed.owl.carousel'，syncPosition）；
功能同步位置（el）{
$owl_slider=$（this.data（'owl.carousel'）；
var loop=$owl_slider.options.loop；
如果（循环）{
var count=el.item.count-1；
var电流=数学四舍五入（el.item.index-（el.item.count/2）-.5）；
如果（电流<0）{
电流=计数；
}
如果（当前>计数）{
电流=0；
}
}否则{
var电流=el.item.index；
}
var owl_thumbnail=sync2.data（'owl.carousel'）；
var itemClass=“.”+owl_缩略图.options.itemClass；
var thumbnailCurrentItem=sync2
.find（itemClass）
.removeClass（“已同步”）
.eq（电流）；
thumbnailCurrentItem.addClass（'synced'）；
如果（！thumbnailCurrentItem.hasClass（'active'））{
var持续时间=300；
sync2.trigger（'to.owl.carousel'，[current，duration，true]）；
}
}
var thumbs=sync2.owlCarousel({
起始位置：12，
项目：4，
循环：false，
差额：10，
自动播放：错误，
导航：错，
点：错，
初始化：函数（e）{
var thumbnailCurrentItem=$（e.target）.find（thumbnailItemClass）.eq（this.\u current）；
thumbnailCurrentItem.addClass（'synced'）；
},
})
.on（'click'，thumbnailItemClass，函数（e）{
e、 预防默认值（）；
var持续时间=300；
var itemIndex=$（e.target）.parents（thumbnailItemClass）.index（）；
sync1.trigger（'to.owl.carousel'，[itemIndex，duration，true]）；
}).on（“已更改的.owl.carousel”，函数（el）{
变量编号=el.item.index；
$owl_slider=sync1.data（'owl.carousel'）；
$owl_slider.to（数字，100，真）；
});
.sliderContent{
边缘顶端：40px；
}
.active.Synched h2{
颜色：红色；
}

测试内容1
测试内容2
测试内容3
图姆奈尔1号
图姆奈尔2号
图姆奈尔3
测试内容4
测试内容5
测试内容6
图姆奈尔4号
图姆奈尔5号
图姆奈尔6号
我已经更新了您的脚本，允许在单个页面上运行多个滑块，研究Javascript上的for循环和变量范围

演示URL:


$（'.sync'）。每个（函数（）{//在此处更新
（函数（_e）{//在此处更新
var sync1=$（_e）.find（“.slider”）；
var sync2=$（_e）.find（“.navigation thumbs”）；
var thumbnailItemClass='.owl item'；
var slides=sync1.owlCarousel({
视频：没错，
起始位置：12，
项目：1，
循环：对，
差额：10，
自动播放：对，
自动播放超时：6000，
自动播放暂停：false，
导航：错，
圆点：对
}).on（'changed.owl.carousel'，syncPosition）；
功能同步位置（el）{
$owl_slider=$（this.data（'owl.carousel'）；
var loop=$owl_slider.options.loop；
如果（循环）{
var count=el.item.count-1；
var电流=数学四舍五入（el.item.index-（el.item.count/2）-.5）；
如果（电流<0）{
电流=计数；
}
如果（当前>计数）{
电流=0；
}
}否则{
var电流=el.item.index；
}
var owl_thumbnail=sync2.data（'owl.carousel'）；
var itemClass=“.”+owl_缩略图.options.itemClass；
var thumbnailCurrentItem=sync2
.find（itemClass）
.removeClass（“已同步”）
.eq（电流）；
thumbnailCurrentItem.addClass（'synced'）；
如果（！thumbnailCurrentItem.hasClass（'active'））{
var持续时间=300；
sync2.trigger（'to.owl.carousel'，[current，duration，true]）；
}   
}
var thumbs=sync2.owlCarousel({
起始位置：12，
项目：4，
循环：false，
差额：10，
自动播放：错误，
导航：错，
点：错，
初始化：函数（e）{
var thumbnailCurrentItem=$（e.target）.find（thumbnailItemClass）.eq（this.\u current）；
thumbnailCurrentItem.addClass（'synced'）；
},
})
.on（'click'，thumbnailItemClass，函数（e）{
e、 预防默认值（）；
var持续时间=300；
var itemIndex=$（e.target）.parents（thumbnailItemClass）.index（）；
sync1.trigger（'to.owl.carousel'，[itemIndex，duration，true]）；
}).on（“已更改的.owl.carousel”，函数（el）{
变量编号=el.item.index；
$owl_slider=sync1.data（'owl.carousel'）；
$owl_slider.to（数字，100，真）；
});
})（此）；//此处更新
});
.sync.item{
背景：#0c83e7；
填充：80px 0px；
保证金：5px；
颜色：#FFF；
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
文本对齐：居中；
}
.sync.item{
背景：#C9C9C9；
填充：10px 0px；
保证金：5px；
颜色：#FFF；
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
文本对齐：居中；
光标：指针；
}
.sync.item h1{
字号：18px；
}
.sync.synced.item{
背景：#0c83e7；
}

1.
2.
3.
4.
5.
6.
7.
1.
2.
3.
4.
5.
6.
7.
1.
2.
3.
4.
5.
6.
7.
1.
2.
3.
4.
5.
6.
7.
给我一份som