Перейти к последнему слайду на карусели Bootstrap

Question

Я создаю карусель с бутстрапом, и я бы хотел создать ссылку, которая прыгает прямо к последнему слайду в карусели (с n слайдами, а не фиксированным числом). Я попытался решить эту проблему, назначая класс active до последнего div в этом пути:

$(".last").click(function(){ 
    $('myCarousel div').removeClass('active'); 
    $('myCarousel div:last-child').addClass('active'); 
}); 

Но это работает, если у меня есть только карусель на моей странице, но если карусели более чем одна ссылки перейдите к последнему слайду на всех каруселях. Как я могу решить проблему? Ниже приведен пример кода:

<div id="myCarousel1" class="carousel slide"> 
<div class="carousel-inner" role="listbox"> 
    <div class="item active slide"> 
    <img src="http://placehold.it/350x150"> 
    </div> 
    […] other items 
</div>  
</div> 
<ul> 
<a href="#myCarousel1" data-slide="prev"><li>Prev</li></a> 
<a href="#myCarousel1" data-slide="next"><li>Next</li></a> 
<a href="#myCarousel1"><li class="last">Last</li></a> 
</ul> 

<div id="myCarousel2" class="carousel slide"> 
<div class="carousel-inner" role="listbox"> 
    <div class="item active slide"> 
    <img src="http://placehold.it/350x150"> 
    </div> 
    […] other items 
</div>  
</div> 
<ul> 
<a href="#myCarousel2" data-slide="prev"><li>Prev</li></a> 
<a href="#myCarousel2" data-slide="next"><li>Next</li></a> 
<a href="#myCarousel2"><li class="last">Last</li></a> 
</ul> 

<script> 
$(document).ready(function(){ 
$(".last").click(function(){ 
    $('[id^="myCarousel"] div').removeClass("active"); 
    $('[id^="myCarousel"] div:last-child').addClass("active"); 
});  
}); 
</script> 

Спасибо!

Answer 1

Просто добавьте карусельный идентификатор к вашему селектору JQuery, как это:

$(".last").click(function(){ 
    $('#myCarousel1 div').removeClass('active'); 
    $('#myCarousel1 div:last-child').addClass('active'); 
}); 

Edit:

Если вы хотите, чтобы идентификатор вашей карусели быть динамичным, вы должны ссылаться на него где-нибудь. Вы можете поставить атрибут ссылки на последний слайд и прочитать этот атрибут при щелчке на ссылке, как это:

$('.last').click(function(e){ 
    var id = $(this).attr('data-id'); 
    $('#myCarousel' + id + ' div').removeClass('active'); 
    $('#myCarousel' + id + ' div:last-child').addClass('active'); 
}); 

И добавить данные идентификатор для вашей ссылки, как это:

<li class="last" data-id="2">Last</li>