Create an Slider in HTML CSS and Javascript step by step

Khái quát

Có lẻ slider hay carousel hay banner đều là những thứ quan trọng nhất đối với các website về thương mại, vì nếu muốn dử chân khách hàng lại sau khi xem trang thì cái đầu tiên đập vào mắt họ phải thật sự ấn tượng. Thành công giử họ lại trên 5s thì có nghĩa design của chúng ta phần nào đó có gì đó ấn tượng.

Nhưng những thứ đập vào mắt họ trước tiên là gì ? Họ sẽ không bỏ thời gian kéo xuống nếu nó không thật sự hấp dẩn đâu. Vì vậy cái đập vào mắt họ chính là slider hay carousel hay banner.

Vậy hôm nay hãy cùng mình đi thiết kế nó một cách ấn tượng nhất để không một khách hàng nào có thể rời mắt nhé.

Hướng dẩn chi tiết

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

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="header">
            <img src="logo.png" class="logo">
            <ul>
                <li>HOME</li>
                <li>CATEGORY</li>
                <li>INFO</li>
                <li>CONTACT</li>
            </ul>
        </div>
        <div id="slide">
            <div class="item">
                <div class="image">
                    <img src="img2.png">
                </div>
                <div class="content">
                    <div class="left">
                        <h1>LUNDEV</h1>
                        <div class="des">Tinh ru anh choi da <br> Chua kip choi da ma em da da anh</div>
                        <button>Seee more
                            <i class="fa-solid fa-angle-right"></i>
                            <i class="fa-solid fa-angle-right"></i>
                            <i class="fa-solid fa-angle-right"></i>
                        </button>
                    </div>
                    <div class="right">
                        <h2>CẤU HÌNH</h2>
                        <ul>
                            <li>
                                <p>Năm sản xuất</p>
                                <p>2022</p>
                            </li>
                            <li>
                                <p>Năm sản xuất</p>
                                <p>2022</p>
                            </li>
                            <li>
                                <p>Năm sản xuất</p>
                                <p>2022</p>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
             <div class="item">
                <div class="image">
                    <img src="img1.png">
                </div>
                <div class="content">
                    <div class="left">
                        <h1>LUNDEV</h1>
                        <div class="des">Tinh ru anh choi da <br> Chua kip choi da ma em da da anh</div>
                        <button>Seee more
                            <i class="fa-solid fa-angle-right"></i>
                            <i class="fa-solid fa-angle-right"></i>
                            <i class="fa-solid fa-angle-right"></i>
                        </button>
                    </div>
                    <div class="right">
                        <h2>CẤU HÌNH</h2>
                        <ul>
                            <li>
                                <p>Năm sản xuất</p>
                                <p>2022</p>
                            </li>
                            <li>
                                <p>Năm sản xuất</p>
                                <p>2022</p>
                            </li>
                            <li>
                                <p>Năm sản xuất</p>
                                <p>2022</p>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
             <div class="item">
                <div class="image">
                    <img src="img3.png">
                </div>
                <div class="content">
                    <div class="left">
                        <h1>LUNDEV</h1>
                        <div class="des">Tinh ru anh choi da <br> Chua kip choi da ma em da da anh</div>
                        <button>Seee more
                            <i class="fa-solid fa-angle-right"></i>
                            <i class="fa-solid fa-angle-right"></i>
                            <i class="fa-solid fa-angle-right"></i>
                        </button>
                    </div>
                    <div class="right">
                        <h2>CẤU HÌNH</h2>
                        <ul>
                            <li>
                                <p>Năm sản xuất</p>
                                <p>2022</p>
                            </li>
                            <li>
                                <p>Năm sản xuất</p>
                                <p>2022</p>
                            </li>
                            <li>
                                <p>Năm sản xuất</p>
                                <p>2022</p>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
            
        </div>
        <div class="directional">
            <button id="prev"><i class="fa-solid fa-angle-left"></i></button>
            <button id="next"><i class="fa-solid fa-angle-right"></i></button>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

Code CSS

  body{
    background-color: #3A0E6A;
    color:#ddd;
    font-family: system-ui;
}
.container{
    position: absolute;
    width:1000px;
    height:600px;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background-image: radial-gradient(#320643, #140534);
    overflow: hidden;
}
.header{
    position: absolute;
    top:0;
    width:100%;
    z-index: 1111;
    padding:10px;
}
.header .logo{
    width:40px;
    height:40px;
    display: inline-block;
}
.header ul{
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline-block;
    transform: translate(0,-14px);
}
.header li{
    display: inline-block;
    font-size: 13px;
    margin-left: 20px;
}
.directional{
    position: absolute;
    bottom:1px;
    width:100%;
    text-align: center;
    z-index: 3;
}
.directional button{
    width:50px;
    height:50px;
    color:#fff;
    background-color: transparent;
    border:none;
    opacity: 0.2;
}
.directional button:hover{
    opacity: 1;
}
#slide{
    position: relative;
    width:100%;
    height:100%;
}
#slide .item{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 1;
}
#slide .item .image{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:75%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: end;
    opacity: 0;
    transform: scale(3);
    transition: 1.5s;
}
#slide .item .image img{
    width:65%;
    transition: 0.5s;
}
#slide .item .image::before{
    position: absolute;
    bottom:-30px;
    height:60px;
    width:60%;
    background-color: #000;
    content:'';
    z-index: -1;
    border-radius: 50%;
    filter:blur(30px)
}
#slide .item .image img:hover{
    transform: scale(1.1);
}
.content .left{
    position: absolute;
    left:40px;
    top:15%;
    display: none;
}
.content .left h1{
    font-size: xxx-large;
    font-weight: 500;
    margin-bottom:10px;
}
.content .left .des{
    font-size: small;
    font-weight: 100;
    opacity: 0.6;
    margin-bottom:20px;
}
.content .left button{
    font-size: small;
    background-color: transparent;
    border:none;
    color:#fff;
}
.content .left button i:nth-child(1){
    margin-left: 10px;
}
.content .right{
    position: absolute;
    right:40px;
    top:15%;
    display: none;
}
.content .right h2{
    font-size: large;
    font-weight: 500;
    margin-bottom:10px;
}
.content .right ul{
    padding: 0;
    margin:0;
    list-style: none;
}
.content .right li{
    font-size: small;
    position: relative;
    margin-top: 20px;
}
.content .right li::before{
    position: absolute;
    left:-40px;
    top:50%;
    transform: translate(0,-50%);
    width:8px;
    height: 8px;
    background-color: #8C0781;
    content:'';
    border-radius: 50%;
    box-shadow:  0 0 10px #8C0781;
}
.content .right li p:nth-child(1){
    font-weight: 500;
    padding:0;
    margin:0;
}
.content .right li p:nth-child(2){
    font-weight: 100;
    padding:0;
    margin:0;
    font-size: x-small;
}
#slide .item:nth-child(1) .image{
    opacity: 0;
    transform: scale(0) translate(-100px);
}
#slide .item:nth-child(2) .image{
    opacity: 1;
    transform: scale(1);
}
#slide .item:nth-child(2){
    z-index: 3;
}
@keyframes contentOut {
    from{
        opacity: 1;
    transform: translate(0,0);
    }to{
        opacity: 0;
        transform: translate(0,-100%);
        filter:blur(113px)
    }
}
@keyframes contentIn {
    from{
        opacity: 0;
    transform: translate(0,100%);
    filter:blur(33px)
    }to{
        opacity: 1;
        transform: translate(0,0);
    }
}
#slide .item:nth-child(1) .left,
#slide .item:nth-child(1) .right,
#slide .item:nth-child(2) .left,
#slide .item:nth-child(2) .right{
    display: block;
}
#slide .item:nth-child(1) .left,
#slide .item:nth-child(1) .right{
    animation:contentOut 1s ease-in-out 1 forwards
}
#slide .item:nth-child(2) .left,
#slide .item:nth-child(2) .right{
    animation:contentIn 1s ease-in-out 1 forwards
}

Code Javascript

  document.getElementById('next').onclick = function(){
    let lists = document.querySelectorAll('.item');
    document.getElementById('slide').appendChild(lists[0]);
}

document.getElementById('prev').onclick = function(){
    let lists = document.querySelectorAll('.item');
    document.getElementById('slide').prepend(lists[lists.length - 1]);
}

Khái quát

Hướng dẩn chi tiết

Code HTML

Code CSS

Code Javascript

Thank You

Contact Form