Question

我想在我的页面上实现一个包含多个项目的Bootstrap 3轮播，它应该每步移动一个图像。我尝试使用我发现的几个例子，每次都遇到同样的问题。当我检查元素时，我在每个项目中看到4个图像，然后它移动项目，但所有4个图像一起移动。

目前我使用的例子是here。

This is我使用旋转木马的页面。

请帮忙！

我在这里添加我的HTML代码

<div class="col-xs-12 text-center" style=" direction: ltr">
<div class="col-md-10 col-md-offset-1">
    <div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">

            <div class="item active">
                <div class="col-md-3"><a href="#"><img src="http://www.sea-gal.co.il/sysvault/docsgalleries28/thcdp635830250227371376.jpg" class="img-responsive"></a></div>
            </div>

            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://www.sea-gal.co.il/sysvault/docsgalleries28/thcdp635830250229867424.jpg" class="img-responsive"></a></div>
            </div>

            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://www.sea-gal.co.il/sysvault/docsgalleries28/thcdp635830250232831481.jpg" class="img-responsive"></a></div>
            </div>

            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://www.sea-gal.co.il/sysvault/docsgalleries28/thcdp635830250234859520.jpg" class="img-responsive"></a></div>
            </div>

            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://www.sea-gal.co.il/sysvault/docsgalleries28/thcdp635830250236731556.jpg" class="img-responsive"></a></div>
            </div>

            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://www.sea-gal.co.il/sysvault/docsgalleries28/thcdp635830250238603592.jpg" class="img-responsive"></a></div>
            </div>

            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://www.sea-gal.co.il/sysvault/docsgalleries28/thcdp635830250240475628.jpg" class="img-responsive"></a></div>
            </div>

            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://www.sea-gal.co.il/sysvault/docsgalleries28/thcdp635830250242503667.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>

这就是我正在使用的javascript：

    $(document).ready(function () {
    $('#myCarousel').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));
        }
    });
});

这是我正在使用的CSS：

.carousel-inner .active.left { left: -25% ; }
.carousel-inner .next        { left:  25% ; }
.carousel-inner .prev        { left:  -25% ; }
.carousel-control            { width:  4%; }
.carousel-control.left,.carousel-control.right {margin-left:-15px;background-image:none;}

Answer 1

欧客。这不是你的HTML的问题。您的javascript正在移动<div class='item'>

将您的HTML更改为此。

      <div class="col-xs-12 text-center" style=" direction: ltr">
        <div class="col-md-10 col-md-offset-1">
            <div class="carousel slide" id="myCarousel">
                <div class="carousel-inner">

                    <div class="GIVE_THIS_ANOTHER_CLASS">
                        <div class="item active col-md-3"><a href="#"><img src="http://www.sea-gal.co.il/sysvault/docsgalleries28/thcdp635830250227371376.jpg" class="img-responsive"></a></div>
                    </div>
                </div>
<!-- YOUR OTHER DIVS WITH IMAGES UNDER THIS-->

            <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>

班级item active将其替换为col-md-3 div 你的javascript正在使用类item移动div并且不会尝试将图像移动到其中。所以重新制作你的javascript或替换你的课程

带有多个项目的bootstrap轮播不会移动1个图像

1 个答案: