CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3carousel
Alex
Alex

Reputation: 819

Coexistance of 2 different Bootstrap carousels

My problem is that i want to make coexist 2 different carousels based on Bootstrap.

One is the simple one : 

    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">

        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item">
                <img src="Images/pub.png">
            </div>
            <div class="item">
                <img src="Images/pub.png">
            </div>
            <div class="item">
                <img src="Images/pub.png">
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>

And the other, with 4 items displayed in one frame :

    <div class="carousel slide" id="myCarousel2">
        <div class="carousel-inner">
            <div class="item active">
                <li class="col-lg-3">
                    <div class="center-block"></div>
                </li>
            </div>
            <div class="item">
                <li class="col-lg-3">
                    <div class="center-block"></div>
                </li>
            </div>
            <div class="item">
                <li class="col-lg-3">
                    <div class="center-block"></div>
                </li>
            </div>
            <div class="item">
                <li class="col-lg-3">
                    <div class="center-block"></div>
                </li>
            </div>
            <div class="item">
                <li class="col-lg-3">
                    <div class="center-block"></div>
                </li>
            </div>
            <div class="item">
                <li class="col-lg-3">
                    <div class="center-block"></div>
                </li>
            </div>
            <div class="item">
                <li class="col-lg-3">
                    <div class="center-block"></div>
                </li>
            </div>
            <div class="item">
                <li class="col-lg-3">
                    <div class="center-block"></div>
                </li>
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel2" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="right carousel-control" href="#myCarousel2" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
</div>

myCarousel2 act like if u click on a chevron, only one item slide :

$('#myCarousel2').carousel({
    interval: 4000
    })

$('.carousel .item').each(function(){
    var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    for (var i=0;i<2;i++) {
        next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

        next.children(':first-child').clone().appendTo($(this));
    }
});

Here is the css of the second carousel, which use Bootstrap and a modified version too :

    .carousel-inner .active.left { left: -25%; }
    .carousel-inner .next        { left:  25%; }
    .carousel-control.left,.carousel-control.right {background-image:none;}

Doing this, the first carousel act like the second. I think it's a conflict caused by the bootstrap classes the 2 carousels use, so i tried to override them by creating new classes specifics to the first carousel, but with the same attributes as Bootstrap, and it failed.

Does someone have an idea?

Thanks!

Upvotes: 0

Views: 1825

Answers (1)

BENARD Patrick
BENARD Patrick

Reputation: 30975

I think you didn't selected correctly the second carrousel...

Bootply : http://www.bootply.com/nALoYV9bHB

Css:

#myCarousel2 .carousel-inner .active.left { left: -25%; }
#myCarousel2 .carousel-inner .next        { left:  25%; }
#myCarousel2 .carousel-control.left,.carousel-control.right {background-image:none;}

JS:

$('#myCarousel2').carousel({
        interval: 4000
        })

  $('#myCarousel2.carousel .item').each(function(){
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));

        for (var i=0;i<2;i++) {
            next=next.next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }

            next.children(':first-child').clone().appendTo($(this));
        }
    });

Upvotes: 1

Related Questions