Carosel slide Boostrap 4 Full, Beutiful P2 (Chạy ảnh ngang với 6 ảnh trượt từng ảnh 1)

<div class="container">
    <div class="row">
        <div id="carousel-example-multi" class="carousel slide carousel-multi-item v-2" data-ride="carousel">
            <div class="controls-top">
                <a class="btn-floating" href="#carousel-example-multi" data-slide="prev">
                    <i class="fas fa-chevron-left"></i>
                </a>
                <a class="btn-floating" href="#carousel-example-multi" data-slide="next">
                    <iclass="fas fa-chevron-right">                        </i>
                </a>
            </div>
            <!--/.Controls-->

            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-multi" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-multi" data-slide-to="1"></li>
                <li data-target="#carousel-example-multi" data-slide-to="2"></li>
                <li data-target="#carousel-example-multi" data-slide-to="3"></li>
                <li data-target="#carousel-example-multi" data-slide-to="4"></li>
                <li data-target="#carousel-example-multi" data-slide-to="5"></li>
            </ol>
            <!--/.Indicators-->

            <div class="carousel-inner v-2" role="listbox">

                <div class="carousel-item active">

                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-6">
                        <div class="card mb-2">
                            <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img (36).jpg" alt="Card image cap">
                            <div class="card-body">
                                <h4 class="card-title font-weight-bold">Ảnh 1 Activư</h4>
                                <p class="card-text">
                                    Some quick example text to build on the card title and make up the bulk of the
                                    card's content.
                                </p>
                                <a class="btn btn-primary btn-md btn-rounded">Button</a>
                            </div>
                        </div>
                    </div>
                </div>    

                <div class="carousel-item">
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-6">
                        <div class="card mb-2">
                            <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img (34).jpg"   alt="Card image cap">
                            <div class="card-body">
                                <h4 class="card-title font-weight-bold">Ảnh 2 đầu</h4>
                                <p class="card-text">
                                    Some quick example text to build on the card title and make up the bulk of the
                                    card's content.
                                </p>
                                <a class="btn btn-primary btn-md btn-rounded">Button</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-6">
                        <div class="card mb-2">
                            <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img (38).jpg" alt="Card image cap">
                            <div class="card-body">
                                <h4 class="card-title font-weight-bold">Card title</h4>
                                <p class="card-text">
                                    Some quick example text to build on the card title and make up the bulk of the card's content.
                                </p>
                                <a class="btn btn-primary btn-md btn-rounded">Button</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-6">
                        <div class="card mb-2">
                            <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img (29).jpg"     alt="Card image cap">
                            <div class="card-body">
                                <h4 class="card-title font-weight-bold">Card title</h4>
                                <p class="card-text">
                                    Some quick example text to build on the card title and make up the bulk of the
                                    card's content.
                                </p>
                                <a class="btn btn-primary btn-md btn-rounded">Button</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-6">
                        <div class="card mb-2">
                            <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img (30).jpg"    alt="Card image cap">
                            <div class="card-body">
                                <h4 class="card-title font-weight-bold">Card title</h4>
                                <p class="card-text">
                                    Some quick example text to build on the card title and make up the bulk of the
                                    card's content.
                                </p>
                                <a class="btn btn-primary btn-md btn-rounded">Button</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-6">
                        <div class="card mb-2">
                            <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img (27).jpg"    alt="Card image cap">
                            <div class="card-body">
                                <h4 class="card-title font-weight-bold">
                                    Card title
                                </h4>
                                <p class="card-text">
                                    Some quick example text to build on the card title and make up the bulk of the
                                    card's content.
                                </p>
                                <a class="btn btn-primary btn-md btn-rounded">
                                    Button
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

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

<script type="text/javascript">
    $('.carousel.carousel-multi-item.v-2 .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<4;i++) {
            next=next.next();
            if (!next.length) {
                next=$(this).siblings(':first');
            }
            next.children(':first-child').clone().appendTo($(this));
        }
    });
    $('.carousel').carousel({
interval: 2000
})

</script>



<style type="text/css">


    .carousel-multi-item{
        margin-bottom:5rem
    }
    .carousel-multi-item .carousel-inner .carousel-item.active,.carousel-multi-item .carousel-item-next,.carousel-multi-item .carousel-item-prev{display:block}.carousel-multi-item .carousel-inner.v-2 .carousel-item-next,.carousel-multi-item .carousel-inner.v-2 .carousel-item-prev,.carousel-multi-item .carousel-inner.v-2 .carousel-item.active{
        display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex
    }
    .carousel-multi-item .carousel-inner.v-2 .carousel-item-next,.carousel-multi-item .carousel-inner.v-2 .carousel-item-right.active{
        -webkit-transform:translateX(16%);
        -ms-transform:translateX(16%);
        transform:translateX(16%)
    }
    .carousel-multi-item .carousel-inner.v-2 .carousel-item-left.active,.carousel-multi-item .carousel-inner.v-2 .carousel-item-prev{
        -webkit-transform:translateX(-16%);        
        -ms-transform:translateX(-16%);
        transform:translateX(-16%)}
        .carousel-multi-item .carousel-inner.v-2 .carousel-item-left,.carousel-multi-item .carousel-inner.v-2 .carousel-item-right{
            -webkit-transform:translateX(0);
            -ms-transform:translateX(0);transform:translateX(0)
        }
        .carousel-multi-item .carousel-indicators li{
            height:1.25rem;
            width:1.25rem;
            max-width:1.25rem;
            background-color:#4285f4;
            margin-bottom:-3.75rem
        }

        .carousel-multi-item .carousel-indicators .active{
            height:1.56rem;
            width:1.56rem;
            max-width:1.56rem;
            background-color:#4285f4;
            -webkit-border-radius:50%;
            border-radius:50%
        }
        .carousel-multi-item .controls-top{
            text-align:center;margin-bottom:1.88rem
        }
        .carousel-multi-item .controls-top .btn-floating{
            background:#4285f4
        }
        .carousel-multi-item .carousel-indicators{
            margin-bottom:-2em
        }
        .carousel-multi-item .card-cascade.narrower{
            margin-top:1.25rem;margin-bottom:.3rem}
            @media (min-width:768px){
                .carousel-multi-item .col-md-4{
                    float:left;width:
                    33.333333%;
                    max-width:100%
                }
            }
            @media only screen and (max-width:992px){
                .carousel-multi-item .carousel-indicators li{
                    margin-bottom:-1.88rem
                }
            }
            .carousel-thumbnails .carousel-indicators{
                white-space:nowrap;overflow-x:auto;position:static;left:initial;width:initial;
                margin-left:initial;margin-right:initial
            }.carousel-thumbnails .carousel-indicators>li{
                width:initial;height:initial;text-indent:initial
            }
            .carousel-thumbnails .carousel-indicators>li .active img{opacity:1}
            .wrapper-carousel-fix .carousel-fade .active.carousel-item-left,.wrapper-carousel-fix .carousel-fade .active.carousel-item-right{
                -webkit-transition:-webkit-transform .6s ease;
                transition:-webkit-transform .6s ease;
                -o-transition:transform .6s ease;transition:transform .6s ease;
                transition:transform .6s ease,-webkit-transform .6s ease;
                -webkit-transition-property:opacity;-o-transition-property:opacity;
                transition-property:opacity
            }




        </style>

Nguồn: https://mdbootstrap.com/docs/jquery/javascript/carousel/