css Bootstrap Multi Carousel滑动一项(4列)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css Bootstrap Multi Carousel滑动一项(4列)相关的知识,希望对你有一定的参考价值。

https://github.com/rtpHarry/Bootstrap3-ShowManySlideOneCarousel/wiki/Change-the-number-of-slides-visible-at-any-one-time

https://codepen.io/rtpHarry/pen/YPBydd



<div class="border_top">

    <div class="col-md-2 fav_sidebar">
        <ul class="ul_sidebar">
            <li><h3>My Profile</h3></li>
            <li>Account Settings</li>
            <li>My House</li>
            <li>Email Settings</li>
        </ul>

        <ul class="ul_sidebar">
            <li><h3>My Kitchens</h3></li>
            <li>Saved Kitchen Designs</li>
            <li>Create New Kitchen</li>
        </ul>

        <ul class="ul_sidebar">
            <li><h3>My Profile</h3></li>
            <li><a href="#">View My Favorites</a></li>
        </ul>

    </div>

    <div class="col-md-10 favorite_border">
        <div class='row fav_line'>
            <div class='col-md-12'>
                <div class="carousel carousel-showmanymoveone slide" id="media">

                    <div class="row carousel_top">
                        <div class="col-md-6">
                            <h3>General Kitchen Style</h3>
                        </div>

                        <div class="col-md-6">
                            <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
                            <a data-slide="next" href="#media" class="right carousel-control">›</a>
                        </div>

                    </div>


                    <div class="carousel-inner">
                        <div class="item active">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>



        <div class='row fav_line'>
            <div class='col-md-12'>
                <div class="carousel carousel-showmanymoveone slide" id="media2">

                    <div class="row carousel_top">
                        <div class="col-md-6">
                            <h3>Cabinets</h3>
                        </div>

                        <div class="col-md-6">
                            <a data-slide="prev" href="#media2" class="left carousel-control">‹</a>
                            <a data-slide="next" href="#media2" class="right carousel-control">›</a>
                        </div>

                    </div>

                    <div class="carousel-inner">
                        <div class="item active">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/0054A6/fff/&amp;text=11" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/002d5a/fff/&amp;text=22" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/d6d6d6/333&amp;text=33" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/002040/eeeeee&amp;text=44" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/0054A6/fff/&amp;text=55" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/002d5a/fff/&amp;text=66" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/eeeeee&amp;text=77" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/40a1ff/002040&amp;text=88" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>



        <div class='row fav_line'>
            <div class='col-md-12'>
                <div class="carousel carousel-showmanymoveone slide" id="media3">

                    <div class="row carousel_top">
                        <div class="col-md-6">
                            <h3>Floors</h3>
                        </div>

                        <div class="col-md-6">
                            <a data-slide="prev" href="#media3" class="left carousel-control">‹</a>
                            <a data-slide="next" href="#media3" class="right carousel-control">›</a>
                        </div>

                    </div>

                    <div class="carousel-inner">
                        <div class="item active">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/0054A6/fff/&amp;text=111" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/002d5a/fff/&amp;text=222" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/d6d6d6/333&amp;text=333" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/002040/eeeeee&amp;text=444" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/0054A6/fff/&amp;text=555" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/002d5a/fff/&amp;text=666" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/eeeeee&amp;text=777" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <figure>
                                    <img src="http://placehold.it/500/40a1ff/002040&amp;text=888" class="img-responsive">
                                    <figcaption><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></figcaption>
                                </figure>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>

    </div>

</div>
    $(document).ready(function() {
        $('#media, #media2, #media3').carousel({
            pause: true,
            interval: 100000
        });

        $('.carousel .item').each(function () {

            var itemToClone = $(this);

            for (var i=1;i<4;i++) {
                itemToClone = itemToClone.next();

                // wrap around if at end of item collection
                if (!itemToClone.length) {
                    itemToClone = $(this).siblings(':first');
                }

                // grab item, clone, add marker class, add to collection
                itemToClone.children(':first-child').clone()
                    .addClass("cloneditem-"+(i))
                    .appendTo($(this));
            }

        });


    });

/* HOVER - favorites  */
figure {
position: relative;
display: inline-block;
}

figcaption {
display: none;
position: absolute;
/* left: 0; */
top: 10px;
bottom: 5px;
right: 10px;
/* background-color: rgba(0,0,0,.15);  */
}

figure:hover img {
opacity: .7;
}

figure:hover figcaption {
display: block;
}

/* CAROUSEL  */

.carousel-showmanymoveone .cloneditem-1,
.carousel-showmanymoveone .cloneditem-2,
.carousel-showmanymoveone .cloneditem-3 {
  display: none;
}
@media all and (min-width: 768px) {
  .carousel-showmanymoveone .carousel-inner > .active.left,
  .carousel-showmanymoveone .carousel-inner > .prev {
    left: -50%;
  }
  .carousel-showmanymoveone .carousel-inner > .active.right,
  .carousel-showmanymoveone .carousel-inner > .next {
    left: 50%;
  }
  .carousel-showmanymoveone .carousel-inner > .left,
  .carousel-showmanymoveone .carousel-inner > .prev.right,
  .carousel-showmanymoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner .cloneditem-1 {
    display: block;
  }
}
@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
  .carousel-showmanymoveone .carousel-inner > .item.active.right,
  .carousel-showmanymoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(50%, 0, 0);
            transform: translate3d(50%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.active.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev.right,
  .carousel-showmanymoveone .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    left: 0;
  }
}
@media all and (min-width: 992px) {
  .carousel-showmanymoveone .carousel-inner > .active.left,
  .carousel-showmanymoveone .carousel-inner > .prev {
    left: -25%;
  }
  .carousel-showmanymoveone .carousel-inner > .active.right,
  .carousel-showmanymoveone .carousel-inner > .next {
    left: 25%;
  }
  .carousel-showmanymoveone .carousel-inner > .left,
  .carousel-showmanymoveone .carousel-inner > .prev.right,
  .carousel-showmanymoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner .cloneditem-2,
  .carousel-showmanymoveone .carousel-inner .cloneditem-3 {
    display: block;
  }
}
@media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
  .carousel-showmanymoveone .carousel-inner > .item.active.right,
  .carousel-showmanymoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(25%, 0, 0);
            transform: translate3d(25%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.active.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-25%, 0, 0);
            transform: translate3d(-25%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev.right,
  .carousel-showmanymoveone .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    left: 0;
  }
}

以上是关于css Bootstrap Multi Carousel滑动一项(4列)的主要内容,如果未能解决你的问题,请参考以下文章

静态 Html 网站 - Bootstrap - 多语言支持

Bootstrap - 等待视频完成,然后再滑动到下一个轮播

暂停和启动带有视频的幻灯片的 Bootstrap 4 轮播

React Multi Page NavBar 重置其状态

CSS多列布局Multi-column伸缩布局Flexbox网格布局Grid详解

上传文件与设置进度条