javascript - Bootstrap slider 冲突

Question

我的页面上有两个 Bootstrap 轮播实例。我使用下面的代码来随机化第一个轮播的页面刷新时的幻灯片。

//randomize the slider on page load 
var $item = $('.carousel .item');  
$item.eq(0).addClass('active'); 

var $numberofSlides = $('.item').length;
var $currentSlide = Math.floor((Math.random() * $numberofSlides));

$('.carousel-indicators li').each(function(){ 
  var $slideValue = $(this).attr('data-slide-to'); 
  if($currentSlide == $slideValue) {
    $(this).addClass('active');
    $item.eq($slideValue).addClass('active');
  } else {
    $(this).removeClass('active');
    $item.eq($slideValue).removeClass('active');
  }
}); 

但是，由于我的页面上有两个轮播。此代码导致其中之一在刷新页面时并不总是加载。我如何使用上面的代码只定位一个轮播？我可以向其中一个添加 ID 并以某种方式合并它吗？

Answer 1

您可以对脚本进行一些简单的更改，以便为每个轮播执行此操作:

//Do this for each .carousel
$(".carousel").each(function () { 
    //randomize the slider on page load
    //Find .item within the current .carousel
    var $item = $(this).find('.item');
    $item.eq(0).addClass('active'); 

    //Find .item within the current .carousel
    var $numberofSlides = $(this).find('.item').length;
    var $currentSlide = Math.floor((Math.random() * $numberofSlides));

    //Find .carousel-indicators li within the current .carousel
    $(this).find('.carousel-indicators li').each(function(){
        var $slideValue = $(this).attr('data-slide-to'); 
        if($currentSlide == $slideValue) {
            $(this).addClass('active');
            $item.eq($slideValue).addClass('active');
        } else {
            $(this).removeClass('active');
            $item.eq($slideValue).removeClass('active');
        }
    }); 
}); 

(我在添加和更改的行之前添加了一些注释)

如果您只想对一个轮播执行此操作，那么您应该给它一个 ID，以便您可以定位它。

//randomize the slider on page load
var $item = $('#carouselid .item');
$item.eq(0).addClass('active'); 

var $numberofSlides = $('#carouselid .item').length;
var $currentSlide = Math.floor((Math.random() * $numberofSlides));

$('#carouselid .carousel-indicators li').each(function(){
    var $slideValue = $(this).attr('data-slide-to'); 
    if($currentSlide == $slideValue) {
        $(this).addClass('active');
        $item.eq($slideValue).addClass('active');
    } else {
        $(this).removeClass('active');
        $item.eq($slideValue).removeClass('active');
    }
}); 

在我输入 carouselid 的三个位置，您可以将其替换为您分配给轮播的 ID。