在bootstrap 3轮播中显示三个以上的项目 [英] display more than three items inside bootstrap 3 carousel

问题描述

我正在尝试按轮播显示产品列表，问题是它不能连续显示三个以上的项目.这是什么问题.这是我使用的代码:

I'm trying to display a list of product by carousel the problem is It can't display more than three items in a row .What's the problem . Here is the code I use :

<script>
$(document).ready(function () {

    $('.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));
        }
    });
});
</script>
<style>
.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%; }
.carousel-control.left,.carousel-control.right {background-image:none;}
.item:not(.prev) {visibility: visible;}
.item.right:not(.prev) {visibility: hidden;}
.carousel-control {
    width:5%
}
</style>
    <div class="container">
        <div class="row">
            <div class="span12">
                <div class="well">
                    <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-2">
                                        <a href="#"><img src="Opitures/970767255465.jpg" class="img-responsive center-block"></a>
                                        <div class="text-center">1</div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="col-md-2">
                                        <a href="#"><img src="Opitures/970767255465.jpg" class="img-responsive center-block"></a>
                                        <div class="text-center">2</div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="col-md-2">
                                        <a href="#"><img src="Opitures/970767255465.jpg" class="img-responsive center-block"></a>
                                        <div class="text-center">3</div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="col-md-2">
                                        <a href="#"><img src="Opitures/970767255465.jpg" class="img-responsive center-block"></a>
                                        <div class="text-center">4</div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="col-md-2">
                                        <a href="#"><img src="Opitures/970767255465.jpg" class="img-responsive center-block"></a>
                                        <div class="text-center">5</div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="col-md-2">
                                        <a href="#"><img src="Opitures/970767255465.jpg" class="img-responsive center-block"></a>
                                        <div class="text-center">6</div>
                                    </div>
                                </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>

                        <!--/carousel-inner-->
                    </div><!--/myCarousel-->
                </div><!--/well-->
            </div>
        </div>
    </div>
</div>

当我使用浏览器运行代码时，它会将幻灯片归类为带有"item"类的div，每个项目都包含三张幻灯片. 这是结果的图片:

When I run the code with browser , it group slides in a div with 'item' class and each item contains three slides . This is the picture of the result :

如何显示更多?

谢谢

推荐答案

看看-启动

将interval: false更改为例如interval: 3000，以每3秒自动更改一次幻灯片.

Change interval: false to for example interval: 3000 to change slides automatically every 3 seconds.

3000是毫秒数(3秒)

3000 is number in miliseconds (3 seconds)

这是您要实现的目标吗?

Is this what you want to achieve?

这篇关于在bootstrap 3轮播中显示三个以上的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！