Namespacing styles break Bootstrap carousel transition

Question

Namespacing styles breaks transitions.

I have a Bootstrap Carousel displaying the previous and next image. I have more than one Bootstrap Carousel, so I need different styles for each. Doing so breaks the transition.

If you comment the .namespace namespacing in the scss file and you will see it works fine. Why does this break? What is a possible fix?

See Not Working Fiddle
See Working Fiddle

HTML

<div class="container-fluid namespace">
    <div class="row">
        <div class="col-md-12 center-block">
            <div class="carousel slide" id="myCarousel">
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="col-xs-4">
                            <a href="#"><img src="http://aszx.altervista.org/aatest/img/carousel/carousel-001.jpg" class="img-responsive"></a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-4">
                            <a href="#"><img src="http://aszx.altervista.org/aatest/img/carousel/carousel-002.jpg" class="img-responsive"></a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-4">
                            <a href="#"><img src="http://aszx.altervista.org/aatest/img/carousel/carousel-003.jpg" class="img-responsive"></a>
                        </div>
                    </div>
                </div>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>
        </div>
    </div>
</div>

CSS

 .namespace {
    .carousel {
        overflow: hidden;
    }

    .carousel-inner {
        width: 150%;
        left: -25%;
    }

    .carousel-inner > .item.next,
    .carousel-inner > .item.active.right {
        left: 0;
        -webkit-transform: translate3d(33%, 0, 0);
        transform: translate3d(33%, 0, 0);
    }

    .carousel-inner > .item.prev,
    .carousel-inner > .item.active.left {
        left: 0;
        -webkit-transform: translate3d(-33%, 0, 0);
        transform: translate3d(-33%, 0, 0);
    }

    .carousel-control.left,
    .carousel-control.right {
        background: rgba(255, 255, 255, 0.3);
        width: 25%;
    }
}

JS

//original code from http://jsbin.com/jadahetoxi/3/edit?html,css,js,output

$(document).ready(function() {
    $('#myCarousel').carousel({
        interval: 10000
    })
    $('.carousel .item').each(function() {
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));
        if (next.next().length > 0) {
            next.next().children(':first-child').clone().appendTo($(this));
        } else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
        }
    });
});

Bootstrap v3.3.6
jQuery v1.11.0

Tina Bell Vance · Accepted Answer · 2016-05-26T14:52:20.370

1

Both of your fiddle outputs look the same. Perhaps you already solved this? I'm viewing them in the most recent version of Mozilla Firefox, on a mac. Perhaps it's a browser specific issue?

It appears that your transitions are "fighting" with the default bootstrap stuff. It's not as much about having .namespace in there, it's about changing the position in CSS while JS is also altering the position.

I've done a few quick modifications to your fiddle -- https://jsfiddle.net/TinaBellVance/gavgngng/1/

edited May 26 '16 at 14:52

answered May 26 '16 at 13:08

Tina Bell Vance

71
1
6

What browser are you using? I'm running Chrome on Mac. However, I did just try Firefox and the slide transition doesn't do anything at all. – tehlivi May 26 '16 at 13:30
I'm running Firefox 46.0.1. I do see the issue in Chrome, however (using 50.0.2661.102). – Tina Bell Vance May 26 '16 at 14:21

Namespacing styles break Bootstrap carousel transition

1 Answers1