3

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

目前我使用我在这里找到的例子。

这是我使用轮播的我的页面。

请帮忙！

我在这里添加我的 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>

这个 ios 我正在使用的 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;}
4

1 回答 1

0

好的。这不是您的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在你的 javascript 中替换它们col-md-3 div 是移动 div 的类item，而不是试图移动其中的图像。所以重新制作你的javascript或替换你的类

于 2015-11-16T11:53:33.873 回答