CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
user2948533
user2948533

Reputation: 1163

How to delete a specific slide from bootstrap carousel using JQuery

I am new to bootstrap. Basically in my Carousel, in some slides I have the Decline button, on clicking of which I want to delete/remove that slide and navigate to the next slide. Is it possible using JQuery? I was trying something similar here in 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');
    });
});

Thank you very much in advance.

Upvotes: 3

Views: 9291

Answers (2)

james kenny
james kenny

Reputation: 131

Brilliant. I was trying to do this and managed to freeze the carousel. Your code works great. Only thing of note is that there appears to be an unused line of code i.e : currentIndex = $('div.active').index(); currentIndex variable does not appear to be used.

Upvotes: 0

J Santosh
J Santosh

Reputation: 3847

On button Click get the active slide and remove it from the DOM. Now make the next .item element active

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>

Note: Don't forget to write code for updating Carousel Indicators on removing element from DOM.

Upvotes: 4

Related Questions