0

命名空间样式会中断转换。

我有一个 Bootstrap Carousel 显示上一个和下一个图像。我有不止一个 Bootstrap Carousel，所以我需要不同的样式。这样做会破坏过渡。

如果您.namespace在 scss 文件中注释命名空间，您会发现它工作正常。为什么会中断？什么是可能的修复？

见 不工作小提琴
见工作小提琴

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));
        }
    });
});

引导v3.3.6
jQuery v1.11.0

4

1 回答 1

1

你的两个小提琴输出看起来都一样。也许你已经解决了这个问题？我在 Mac 上的最新版本的 Mozilla Firefox 中查看它们。也许这是浏览器特定的问题？

看来您的转换正在与默认的引导程序“战斗”。这不是关于.namespace在那里，而是关于改变 CSS 中的位置，而 JS 也在改变位置。

我对你的小提琴做了一些快速修改——https: //jsfiddle.net/TinaBellVance/gavngng/1/

于 2016-05-26T13:08:56.220 回答