Carosel slide Boostrap 4 Full, Beutiful (Hiệu ứng ảnh chạy đẹp cho webíte)


Carosel slide Boostrap 4 Full, Beutiful (Hiệu ứng ảnh chạy đẹp cho webíte)

Slides only ( chạy chỉ 1 ảnh duy nhất)

Here’s a carousel with slides only. Note the presence of the .d-block and .w-100 on carousel images to prevent browser default image alignment.

 

 

 

4. Ảnh chạy với 3 ảnh ngang lướt cùng 1 lúc, trước 3 ảnh.

<div id="carousel-example-multi" class="carousel slide carousel-multi-item v-2" data-ride="carousel">

    <!--Controls-->
    <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">
            <i class="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>
    </ol>
    <!--/.Indicators-->

    <div class="carousel-inner v-2" role="listbox">
        <div class="carousel-item active">
            <div class="row">
                <div class="col-12 col-md-4">
                    <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>
                </div>
                <div class="col-12 col-md-4">
                    <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>
                </div>
                <div class="col-12 col-md-4">
                    <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>
                </div>
            </div>
        </div>

        <div class="carousel-item">
            <div class="row">
                <div class="col-12 col-md-4">
                    <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>
                </div>
                <div class="col-12 col-md-4">
                    <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>
                </div>
                <div class="col-12 col-md-4">
                    <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>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="row">
                <div class="col-12 col-md-4">
                    <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>
                </div>
                <div class="col-12 col-md-4">
                    <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>
                </div>
                <div class="col-12 col-md-4">
                    <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>
                </div>
            </div>
        </div>
        
    </div>

</div>

 

 

 

5. 3 ảnh trượt ngang cùng lúc. 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-4 col-lg-4 col-md-4 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-4 col-lg-4 col-md-4 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-4 col-lg-4 col-md-4 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-4 col-lg-4 col-md-4 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-4 col-lg-4 col-md-4 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-4 col-lg-4 col-md-4 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));
        }
    });

</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(33%);
        -ms-transform:translateX(33%);
        transform:translateX(33%)
    }
    .carousel-multi-item .carousel-inner.v-2 .carousel-item-left.active,.carousel-multi-item .carousel-inner.v-2 .carousel-item-prev{
        -webkit-transform:translateX(-33%);        
        -ms-transform:translateX(-33%);
        transform:translateX(-33%)}
        .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>

 

 

5. 4 ảnh trượt cùng 1 hàng ngang

 

 

<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-3 col-lg-3 col-md-3 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-3 col-lg-3 col-md-3 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-3 col-lg-3 col-md-3 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-3 col-lg-3 col-md-3 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-3 col-lg-3 col-md-3 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-3 col-lg-3 col-md-3 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));
        }
    });

</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(25%);
        -ms-transform:translateX(25%);
        transform:translateX(25%)
    }
    .carousel-multi-item .carousel-inner.v-2 .carousel-item-left.active,.carousel-multi-item .carousel-inner.v-2 .carousel-item-prev{
        -webkit-transform:translateX(-25%);        
        -ms-transform:translateX(-25%);
        transform:translateX(-25%)}
        .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.n


Tin Tức Liên Quan

Đối Tác

Lời Cảm Ơn

Cám ơn quý khách hàng đã tin tưởng và sử dụng dịch vụ cũng như tên miền w24.vn. Chúng tôi sẽ cố gắn hỗ trợ nhiệt tình, xây dựng thương hiệu uy tính, lâu dài với khách hàng.