Question

我正在使用缩略图轮播 - 单张图像滑动here，我复制完整的滑块并将其添加到我的网站中，但现在它可以滑动所有图像。我的网站在这里完整代码，有关更多视图，请访问Here

我想一次只滑一张，但是当我在我的网站上添加它一次滚动完整的滑块然后显示下一张幻灯片帮助我！

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

.carousel-inner.onebyone-carosel { margin: auto; width: 90%; }
.onebyone-carosel .active.left { left: -33.33%; }
.onebyone-carosel .active.right { left: 33.33%; }
.onebyone-carosel .next { left: 33.33%; }
.onebyone-carosel .prev { left: -33.33%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://knowy.co.in/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://www.knowy.co.in/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel fdi-Carousel slide">
 <!-- Carousel items -->
    <div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
        <div class="carousel-inner onebyone-carosel">
            <div class="item active">
                <div class="col-md-4">
                    <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
                    <div class="text-center">1</div>
                </div>
            </div>
            <div class="item">
                <div class="col-md-4">
                    <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
                    <div class="text-center">2</div>
                </div>
            </div>
            <div class="item">
                <div class="col-md-4">
                    <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
                    <div class="text-center">3</div>
                </div>
            </div>
            <div class="item">
                <div class="col-md-4">
                    <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
                    <div class="text-center">4</div>
                </div>
            </div>
            <div class="item">
                <div class="col-md-4">
                    <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
                    <div class="text-center">5</div>
                </div>
            </div>
            <div class="item">
                <div class="col-md-4">
                    <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
                    <div class="text-center">6</div>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#eventCarousel" data-slide="prev"></a>
        <a class="right carousel-control" href="#eventCarousel" data-slide="next"></a>
    </div>
    <!--/carousel-inner-->
</div><!--/myCarousel-->

Answer 1

您使用的是哪个版本的Bootstrap？在3.3.1版之后，Carousel正在使用CSS变换进行动画制作。请参阅此答案：Bootstrap carousel multiple frames at once

缩略图轮播 - 单个图像滑动显示错误。这是滑动全滑块

1 个答案: