Design animation carousel HTML CSS and Javascript

Slider là một trình chiếu để xem xét một loạt nội dung, được xây dựng bằng các chuyển đổi CSS 3D và một chút JavaScript. Nó hoạt động với một loạt hình ảnh, văn bản hoặc đánh dấu tùy chỉnh. Nó cũng bao gồm hỗ trợ cho các điều khiển và chỉ báo trước / sau.

Băng chuyền không tự động chuẩn hóa kích thước trang trình bày. Do đó, bạn có thể cần sử dụng các tiện ích bổ sung hoặc các kiểu tùy chỉnh để kích thước nội dung một cách thích hợp. Mặc dù băng chuyền hỗ trợ các điều khiển và chỉ báo trước đó / tiếp theo, nhưng chúng không bắt buộc một cách rõ ràng. Thêm và tùy chỉnh khi bạn thấy phù hợp.

Video tutorial

Truy cập youtube Lùn Dev để xem nhiều hơn

Code Share

Code HTML

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
</head>
<body>

    <div class="container">
        <div class="background-rotate">
            <div class="bg-rotate"></div>
        </div>

        <!-- slide -->
        <div class="list">
            <div class="item hide">
                <div class="images">
                    <div class="item_img">
                        <img src="5.png" alt="">
                    </div>
                    <div class="item_img"
                        style="--background-rotate: url(2.png)"
                    >
                        <img src="2.png" alt="">
                    </div>
                    <div class="item_img">
                        <img src="6.png" alt="">
                    </div>
                </div>
                <div class="content">
                    <table>
                        <tr>
                            <td><img src="5.png" alt=""></td>
                            <td><b>Name product</b></td>
                            <td><b>$23.001</b></td>
                        </tr>
                        <tr>
                            <td><img src="2.png" alt=""></td>
                            <td><b>Name product</b></td>
                            <td><b>$23.001</b></td>
                        </tr>
                        <tr>
                            <td><img src="6.png" alt=""></td>
                            <td><b>Name product</b></td>
                            <td><b>$23.001</b></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="item active">
                <div class="images">
                    <div class="item_img">
                        <img src="5.png" alt="">
                    </div>
                    <div class="item_img"
                        style="--background-rotate: url(2.png)"
                    >
                        <img src="2.png" alt="">
                    </div>
                    <div class="item_img">
                        <img src="6.png" alt="">
                    </div>
                </div>
                <div class="content">
                    <table>
                        <tr>
                            <td><img src="5.png" alt=""></td>
                            <td><b>Name product</b></td>
                            <td><b>$23.001</b></td>
                        </tr>
                        <tr>
                            <td><img src="2.png" alt=""></td>
                            <td><b>Name product</b></td>
                            <td><b>$23.001</b></td>
                        </tr>
                        <tr>
                            <td><img src="6.png" alt=""></td>
                            <td><b>Name product</b></td>
                            <td><b>$23.001</b></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="item">
                <div class="images">
                    <div class="item_img">
                        <img src="5.png" alt="">
                    </div>
                    <div class="item_img"
                        style="--background-rotate: url(2.png)"
                    >
                        <img src="2.png" alt="">
                    </div>
                    <div class="item_img">
                        <img src="6.png" alt="">
                    </div>
                </div>
                <div class="content">
                    <table>
                        <tr>
                            <td><img src="5.png" alt=""></td>
                            <td><b>Name product</b></td>
                            <td><b>$23.001</b></td>
                        </tr>
                        <tr>
                            <td><img src="2.png" alt=""></td>
                            <td><b>Name product</b></td>
                            <td><b>$23.001</b></td>
                        </tr>
                        <tr>
                            <td><img src="6.png" alt=""></td>
                            <td><b>Name product</b></td>
                            <td><b>$23.001</b></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <!-- list menu -->
        <div class="menu">
            <ul>
                <li><i class="fa-regular fa-keyboard"></i></li>
                <li><i class="fa-regular fa-pen-to-square"></i></li>
                <li><i class="fa-regular fa-user"></i></li>
                <li id="next"><i class="fa-solid fa-arrow-right"></i></li>
            </ul>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

Code CSS

  body{
    background-color: #EFEFEF;
}
.container{
    position: absolute;
    width:900px;
    height:600px;
    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    border-radius: 40px;
}
.background-rotate{
    width:500px;
    height:500px;
    position: absolute;
    overflow: hidden;
    border-top-left-radius: 40px;
}
.bg-rotate{
    position: absolute;
    top:-64px;
    left:-130px;
    width:500px;
    height:500px;
    background-color: #64BEA9;
    border-radius: 30% 70% 25% 75% / 49% 35% 65% 51%;
    transform: rotate(0);
    z-index: -1;
    transition: 1s;
}
/* menu */
.menu{
    position: absolute;
    background-color: #fff;
    border:1px solid #00000011;
    border-radius: 15px;
    left:50%;
    bottom:20px;
    transform: translate(-50%);
}
.menu ul{
    padding:0;
    margin:0;
}
.menu li{
    list-style: none;
    width:50px;
    padding:25px 10px;
    display: inline-block;
    border-radius: 15px;
    text-align: center;
}
.menu li:nth-child(4){
    background-color: #2c393b;
    color:#fff;
}
/* slide begin */

.list{
    position: absolute;
    width:100%;
    height:600px;
}
.item{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    display: flex;
    transition: 0.5s;
    opacity: 0;
}
.item .images,
.item .content{
    width:50%;
}
.content table{
    width:300px;
    position: absolute;
    top:20%;
    right:20px;
    font-family:system-ui;
    letter-spacing: 1px;
    transition: 2s;
    opacity: 0;
    transform: translate(100%,0);
}
.content img{
    width:50px;
}
.content table tr:nth-child(2n + 1) td{
    background-color: #efefef;
}
/* item image */
.item .images .item_img{
    position: absolute;
    width:550px;
    height:550px;
    left:-250px;
    top:-50px;
    border-radius: 50%;
    transition: 2s ease-in-out;
    transform: rotate(-50deg);
}
.item .images .item_img:nth-child(3){
    transform: rotate(-100deg);
}
.item .images img{
    position: absolute;
    width:140px;
    transition: 2s;
}
.item .images .item_img:nth-child(1) img{
    width:140px;
    filter: blur(3px);
}
.item .images .item_img:nth-child(2) img{
    width:170px;
    position: relative;
}
.item .images .item_img:nth-child(3) img{
    width:100px;
    filter: blur(5px);
}
.item .images .item_img:nth-child(2)::before{
    position: absolute;
    top:0;
    left:0;
    width:170px;
    height:50px;
    content:'';
    background-image: var(--background-rotate);
    background-size: 100% 100%;
    filter:blur(20px);
    transition: 1s;
    transition-delay: 1s;
    opacity: 0;
}

/* if item active */

.item.active{
    opacity: 1;
}
.item.active .content table{
    opacity: 1;
    transform: translate(0,0);
}
.item.active .images .item_img:nth-child(1){
    transform: rotate(120deg);
}
.item.active .images .item_img:nth-child(2){
    transform: rotate(170deg);
}
.item.active .images .item_img:nth-child(3){
    transform: rotate(200deg);
}
.item.active .images .item_img:nth-child(1) img{
    transform: rotate(-108deg);
}

.item.active .images .item_img:nth-child(2) img{
    transform: rotate(-188deg);
}
.item.active .images .item_img:nth-child(3) img{
    transform: rotate(-108deg) translate(-130px);
}
.item.active .images .item_img:nth-child(2)::before{
    opacity: 1;
}

/* if item hide  */




.item.hide{
    transition-delay: 2s;
    opacity: 0;
}
.item.hide .images .item_img:nth-child(2)::before{
    opacity: 0;
    transition-delay: 0s!important;
}
.item.hide .images .item_img{
    transform: rotate(300deg)!important;
    filter: blur(10px);
}
.item.hide .content table{
    transform: translate(-100%);
    opacity:0;
}

Code Javascript

  var list = document.querySelectorAll('.list .item');
var rotateElement = document.querySelector('.bg-rotate');
var hide = 0;
var active = 1;
var rotate = 0;
var arrayColor = ['#82B9BA', '#F5C069', '#C47EAA', '#9989D0'];
var postionColor = 0;

document.getElementById('next').onclick = function(){
    rotate = rotate + 100;
    postionColor = postionColor + 1 >= arrayColor.length ? 0 : postionColor + 1;
    active = active + 1 >= list.length ? 0 : active + 1;
    hide = active - 1 < 0 ? list.length -1 : active - 1;
    activeItem();
}
function activeItem(){
    rotateElement.style.transform = 'rotate('+rotate+'deg)';
    rotateElement.style.backgroundColor = arrayColor[postionColor];

    let remove_hide_active = hide - 1 < 0 ? list.length - 1 : hide - 1;
    list[remove_hide_active].classList.remove('hide');
    list[remove_hide_active].classList.remove('active');

    // add action and remove_hide_active
    list[hide].classList.add('hide');
    list[active].classList.add('active');

    // disable button neext 2s
    document.getElementById('next').style.pointerEvents = 'none';
    setTimeout(function(){
        document.getElementById('next').style.pointerEvents = 'unset';
    }, 1700)
}

Video tutorial

Code Share

Code HTML

Code CSS

Code Javascript

Download code and image

Thank You

Contact Form