与缩略图的引导转盘 [英] Bootstrap carousel with thumbnail

问题描述

这里的问题是，它工作正常到第9个缩略图，但是当第11和第12个点击它

这里是使用的脚本

  $（'＃myCarousel'）。carousel（{
 pause：true，
 interval：false 
}）; 
 
 //处理旋转木马缩略图
 $（'[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'）。bind（'slide.bs.carousel'，function（e）{
 var slideFrom = $（this）.find（'。active'） .index（）; 
 var videoContent = $（'。item [data-slide-number ='+ slideFrom +'] .embed-responsive'）; 
 videoContent.html（videoContent.html ; 
}）; 
 
 //当转盘滑动时，自动更新
 $（'＃myCarousel'）。on（'slid.bs.carousel'，function（e）{
 var id = $（'。item.active'）。data（'slide-number'）; 
 id = parseInt（id）; 
 $（'[id ^ = carousel-selector-]'）。 removeClass（'selected'）; 
 $（'[id = carousel-selector  - '+ id +']'）addClass（'selected'）; 
} 
  

任何帮助都非常感谢！

strong> DEMO

解决方案

使用：

  var parts = id_selector.split（ - ）; 
 var id = parts [parts.length  -  1] 
  

  var id = id_selector.substr（id_selector.length -1）; 
  

因为您只能获得 id 10 ，则 0

而我在 - 后取了最后一个字/值。

工作小提琴

I have a bootstrap carousel which has html content display sliding.

The issue here is, it works fine till 9th thumbnail, but when 11th and 12th is clicked it is sliding back to first content box instead of respective id.

here is the script used

$('#myCarousel').carousel({
              pause: true,
              interval: false
            });

            // 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);
              $('#myCarousel').carousel(id);
              $('[id^=carousel-selector-]').removeClass('selected');
              $(this).addClass('selected');
            });

            $('#myCarousel').bind('slide.bs.carousel', function (e) {
              var slideFrom = $(this).find('.active').index();
              var videoContent = $('.item[data-slide-number='+slideFrom+'] .embed-responsive');
              videoContent.html( videoContent.html() );
            });

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

Any help is appreciated!

DEMO

解决方案

Use:

var parts = id_selector.split("-");
var id = parts[parts.length - 1]

Instead of

var id = id_selector.substr(id_selector.length -1);

Because your are getting only last character of the id which is 0 if you select 10.

Instead i have taken last word/value after -.

Working Fiddle

这篇关于与缩略图的引导转盘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！