如何使用JQuery從引導輪播刪除特定幻燈片

Question

我是自舉新手。 基本上在我的旋轉木馬中，在某些幻燈片中，我有「拒絕」按鈕，單擊時要刪除/移除該幻燈片並導航到下一張幻燈片。 是否有可能使用JQuery？ 我在這裏試圖JSFiddle

var $carousel = $('#myCarousel'), 
    $carouselItems = $('.item', $carousel); 

$carousel.on('slid.bs.carousel', function (e) { 
    $carouselItems.removeClass('prev next'); 
    var $active = $(e.relatedTarget); 
    $active.next().addClass('next'); 
    $active.prev().addClass('prev'); 
}) 

$(document).ready(function(){ 
    $("button").click(function(){ 
     $("#div1").remove(); 
     $("#li1").remove(); 
     $("#li2").attr("data-slide-to",0); 
     $("#li2").attr("data-slide-to",1); 
     $("#div2").addClass('active'); 
    }); 
}); 

類似的東西非常感謝你提前。

Answer 1

開啓按鈕單擊獲取活動幻燈片並將其從DOM中刪除。現在，讓下.item元素活躍

JS

var $carousel = $('#myCarousel'); 
 
$("button").click(function() { 
 
    currentIndex = $('div.active').index(); 
 
    var ActiveElement = $carousel.find('.item.active'); 
 
    ActiveElement.remove(); 
 
    var NextElement = $carousel.find('.item').first(); 
 
    NextElement.addClass('active'); 
 
});

.content-area { 
 
    position: relative; 
 
    width: 460px; 
 
    margin: 0 auto; 
 
} 
 
.carousel-indicators li { 
 
    border-radius: 50%; 
 
    height: 20px; 
 
    width: 20px; 
 
} 
 
.carousel-indicators .active { 
 
    height: 25px; 
 
    width: 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<div class="content-area"> 
 
    <div id="myCarousel" class="carousel slide"> 
 
     <!-- Indicators --> 
 
     <ol class="carousel-indicators"> 
 
      <li data-target="#myCarousel" id="li1" data-slide-to="0" class="active"></li> 
 
      <li data-target="#myCarousel" id="li2" data-slide-to="1"></li> 
 
      <li data-target="#myCarousel" id="li3" data-slide-to="2"></li> 
 
     </ol> 
 
     <!-- Wrapper for slides --> 
 
     <div class="carousel-inner"> 
 
      <div class="item active" id="div1"> 
 
       <img src="http://placekitten.com/960/600"> 
 
      </div> 
 
      <div class="item" id="div2"> 
 
       <img src="http://placebear.com/960/600"> 
 
      </div> 
 
      <div class="item" id="div3"> 
 
       <img src="http://placekitten.com/960/600"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
 
    <span class="icon-prev"></span> 
 
    </a> 
 
<a class="right carousel-control" href="#myCarousel" data-slide="next"> 
 
    <span class="icon-next"></span> 
 
    </a> 
 

 
</div> 
 
<div> 
 
    <button>Remove div element</button> 
 
</div>

注：不要忘了寫代碼從DOM元素刪除木馬更新指標。