带缩略图的Bootstrap旋转木马（多旋转木马） [英] Bootstrap carousel with thumbnails (Multiple Carousel)

问题描述

我正在查找如何创建带有缩略图的Bootstrap旋转木马，并且我遇到了这个问题：
http://jsfiddle.net/xuhP9/67/

  $（'＃myCarousel'）。carousel（ {
 interval：4000 
}）; 
 $ b $（'[id ^ = carousel-selector  - ]'）。click（function（）{
 var id_selector = $（this）.attr（id）; 
 var id = id_selector.substr（id_selector.length  -  1）; 
 id = parseInt（id）; 
 $（'＃myCarousel'）。carousel（id）; 
 $（ '[id ^ = carousel-selector  - ]'）。removeClass（'selected'）; 
 $（this）.addClass（'selected'）; 
}）; （'slide'，function（e）{
 var id = $（'。item.active'）。data（'slide-number' '）; 
 id = parseInt（id）; 
 $（'[id ^ = carousel-selector  - ]'）。removeClass（'selected'）; 
 $（'[id ^ = carousel-selector-'+ id +']'）。addClass（'selected'）; 
}）; 
  

然而，我需要在一个页面中放置多个轮播，而我并不完全当然，我可以做到这一点。我厌倦了将id选择器切换到类选择器，所以我可以创建多个选择器。但我不确定如何真正修复JS功能以使其工作，因为它们似乎被蒙上了一层阴影。

基本上，这就是我想要实现的： http://jsfiddle.net/xuhP9/70/ 但没有重复每个独立轮播的JS创建。

预先感谢！

解决方案

传送带ID = myCarousel1，myCarousel2等。

和相应传送带的选择器分别为carousel-selector1-1，carousel-selector1-2 ...和carousel -selector2-1，carousel-selector2-2

更新小提琴： http://jsfiddle.net/xuhP9/77/

  $（'。customCarousel'）。旋转木马（{
 interval：4000 
}）; 
 
 //处理轮播缩略图
 $（'[id ^ = carousel-selector]'）。click（function（）{
 var id_selector = $（this）。 attr（id）; 
 var id = id_selector.substr（id_selector.length  -  1）; 
 id = parseInt（id）; 
 var parent = $（this）.closest（ '''）。data（'carousel'）; 
 $（'＃myCarousel'+ parent）.carousel（id）; 
 $（'[id ^ = carousel-selector'+ parent +' - ''）。removeClass（'selected'）; 
 $（this）.addClass（'selected'）; 
}）; 
 
 //当转盘滑动时，自动更新
（'。customCarousel'）。on（'sliding'，function（e）{
 var cont = $（this ）.data（'carousel'）; 
 var id = $（'＃myCarousel'+ cont +'.item.active'）。data（'slide-number'）; 
 id = parseInt（ id）; 
 $（'[id ^ = carousel-selector'+ cont +' - ]'）。removeClass（'selected'）; 
 $（'[id ^ = carousel-selector'+ cont + ' - '+ id +']'）。addClass（'selected'）; 
}）; 
  

I was looking up how to create a Bootstrap carousel with thumbnails, and I came across this: http://jsfiddle.net/xuhP9/67/

$('#myCarousel').carousel({
interval: 4000
});

$('[id^=carousel-selector-]').click(function () {
 var id_selector = $(this).attr("id");
 var id = id_selector.substr(id_selector.length - 1);
 id = parseInt(id);
 $('#myCarousel').carousel(id);
 $('[id^=carousel-selector-]').removeClass('selected');
 $(this).addClass('selected');
});

$('#myCarousel').on('slid', function (e) {
 var id = $('.item.active').data('slide-number');
 id = parseInt(id);
 $('[id^=carousel-selector-]').removeClass('selected');
 $('[id^=carousel-selector-' + id + ']').addClass('selected');
});

Which works well, however, I need to have multiple carousel in a page, and I am not quite sure how I can accomplish this. I tired to switch the id selector into a class selector so I can create more than one. But I am not sure how to actually fix the JS functionality to make it work since they seem to be blinded together.

Basically, this is what I am trying to accomplish: http://jsfiddle.net/xuhP9/70/ but without repeating the JS for each independent carousel I create.

Thanks in advance!

解决方案

This method requires your carousels to have ID = myCarousel1, myCarousel2 etc.

and your selectors for the corresponding carousel to be carousel-selector1-1, carousel-selector1-2 ... and carousel-selector2-1, carousel-selector2-2

Updated Fiddle: http://jsfiddle.net/xuhP9/77/

$('.customCarousel').carousel({
     interval: 4000
 });

 // handles the carousel thumbnails
 $('[id^=carousel-selector]').click(function () {
     var id_selector = $(this).attr("id");
     var id = id_selector.substr(id_selector.length - 1);
     id = parseInt(id);
     var parent = $(this).closest('ul').data('carousel');
     $('#myCarousel' + parent).carousel(id);
     $('[id^=carousel-selector' + parent +'-]').removeClass('selected');
     $(this).addClass('selected');
 });

 // when the carousel slides, auto update
 $('.customCarousel').on('slid', function (e) {
     var cont = $(this).data('carousel');
     var id = $('#myCarousel'+ cont +' .item.active').data('slide-number');
     id = parseInt(id);
     $('[id^=carousel-selector' +cont+'-]').removeClass('selected');
     $('[id^=carousel-selector'+cont+'-' + id + ']').addClass('selected');
 });

这篇关于带缩略图的Bootstrap旋转木马（多旋转木马）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！