Image slider html css | Image slider in css

 

# To create a Image slider html css | Image slider in css Select Menu using JavaScript, you can use a combination of HTML, CSS, and JavaScript to create a Image slider html css | Image slider in css Select Menu and apply a tilt effect to it. Here's an example:

1. First, create a container element in HTML for the Image slider:

<div class="box" id="box_trand">
<p class="top_text_title">Trending Anime 🔥</p>
<span onclick="closeboxt()">+</span>
<div class="loding_bar"></div>
<div class="box_tranding">
        <div class="mov_box">
            <div class="post_box" style="margin-right: 15px;">
                <a href="./view/jutsu-Kaisen-Season-2-download-in-Hindi-dubbed-ORG.html">
                    <img loading="lazy"
                        src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi37rJ3OT2xhmhFOm0T2KGdBvrcKRHNZ00fCdzlJ-NloUU-fV1ORkPtg1-IjNNFJArJel8ybPvii8o69H8wONvwlnPOJRrlhuqEHoXqRYnTehcudmTEehFdOWLsuafCPdxQAUaYGiUB-lQL36OhnYI2jQP2BzQANyzhuz0JhZ4WEbdaXtFdDRyEUQs5ryag/w320-h161/IMG_20231015_105105_222.jpg"
                        alt="jujutsu kaisen season 2 Hd Hindi">
                    <p>Jujutsu Kaisen (Season 2) Hindi Dubbed (ORG) [Dual Audio]</p>
                </a>
            </div>
            <div class="post_box" style="margin-right: 15px;">
                <a href="./view/tomo-chan-is-a-girl-season-1-hindi-dubbed-download.html">
                    <img loading="lazy"
                        src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBzyIHn3xMk8IjUwte33zgOqipPe_nk2V27e8b1062UmoVvWZJa-h2kJ8874EUC6mDKnDkjf4Y0uyU3GyPCU4Q0NKhskwOA8fSXcRS47LyioSS4-jybtJNC6Ibu_L8Hwem2ZqtpJBGuUKg4u43KlLOVgosxq6MTQFoYuY0vD_2K1O0m1sBoNm8Fi4iDf4C/w320-h161/IMG_20231114_152946_518.jpg"
                        alt="Tomo-chan Is a Girl!">
                    <p>Tomo-chan Is a Girl! Hindi Dubbed (ORG) [Dual Audio]</p>
                </a>
            </div>
            <div class="post_box" style="margin-right: 15px;">
                <a
                    href="./view/I-Got-a-Cheat-Skill-in-Another-WorldBecame-Unrivaled-in-the-Real-World-Too.jpg.html">
                    <img loading="lazy"
                        src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqvGtGJOhhiQVEssitDUbBQbwEAV75RGDvG11OjPBuMXpcpMirEBmK4MatuG4mN9AgloZ5N3P4gyStLvikas6M2eltI-qfp_MYdcAiHlEojskULZGFgBBcTsCzlnpJxXlNDAJm3f7h71QuOYN7xIUflhnj_P1a1TmgPlSv3thrFfbljvjnBC4DWbpAjw/s320/IMG_20230426_233317_805.jpg"
                        alt="I Got a Cheat Skill in Another World and Became Unrivaled in The Real World, Too">
                    <p>I Got a Cheat Skill in Another World and Became Unrivaled...</p>
                </a>
            </div>
            <div class="post_box" style="margin-right: 15px;">
                <a href="./view/overflow-season-1-download-in-hind.html">
                    <img loading="lazy"
                        src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyVBqdAdTujm1ymOoPCfYMHNuRCRs_QCQ4U8VItwwvw1Nj0t3ZrjTEjQQJc9HqkgIlwa5DR3qs516D6NwNkmP9d1oe39hEs3ybTM6jow66LPYdwhounjUDVGcAhZoTZfpYD8ETx6p1Hw8rJ9LGl9zgwvXFRsEpqELQR7_VrKwg-0Y-2W2c_2jT3x1Lnw/s320/IMG_20220817_113007_177.jpg"
                        alt="[18+] Overflow | Anime Hentai | Hindi Dubbed">
                    <p>[18+] Overflow | Anime Hentai | Hindi Dubbed</p>
                </a>
            </div>
            <div class="post_box" style="margin-right: 15px;">
                <a href="./view/jutsu-Kaisen-Season-2-download-in-Hindi-dubbed-ORG.html">
                    <img loading="lazy"
                        src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi37rJ3OT2xhmhFOm0T2KGdBvrcKRHNZ00fCdzlJ-NloUU-fV1ORkPtg1-IjNNFJArJel8ybPvii8o69H8wONvwlnPOJRrlhuqEHoXqRYnTehcudmTEehFdOWLsuafCPdxQAUaYGiUB-lQL36OhnYI2jQP2BzQANyzhuz0JhZ4WEbdaXtFdDRyEUQs5ryag/w320-h161/IMG_20231015_105105_222.jpg"
                        alt="jujutsu kaisen season 2 Hd Hindi">
                    <p>Jujutsu Kaisen (Season 2) Hindi Dubbed (ORG) [Dual Audio]</p>
                </a>
            </div>
        </div>
    </div>
</div>

            

2. Next, add some CSS Link to create a Image slider:

                
<link rel="stylesheet" href="https://www.nxprime.in/style/main.css">

            

3. Next, add some CSS to create a Image slider and position the container in the center:

                
body {
    transition: 0.2s All;
}

.box {
    position: fixed;
    bottom: 18px;
    right: 0.75rem;
    width: 19rem;
    height: 17.2rem;
    border-radius: 9px;
    background-color: var(--box);
    padding: 12px;
    z-index: 999;
}

.loding_bar {
    width: 100%;
    height: 9px;
    background-color: #f80757;
    position: relative;
    top: 11px;
    border-radius: 9px;
    overflow: hidden;
}

.box .top_text_title {
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.post_box {
    width: 100%;
    height: 100%;
}

.post_box a img {
    width: 280px;
    height: 140px;
    border-radius: 9px;
}

.post_box a p {
    margin-top: 7px;
    text-align: center;
}

.box span {
    position: absolute;
    top: 1px;
    right: 10px;
    color: #f80757;
    font-size: 38px;
    cursor: pointer;
    transform: rotate(45deg);
}

.box_tranding {
    width: 280px;
    height: auto;
    overflow: clip;
    position: relative;
    top: 23px;
}

.mov_box {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row;
    position: relative;
    animation: right 22s ease-out infinite;
}

@keyframes right {

    0%,
    20% {
        left: 0px;
    }

    25%,
    45% {
        left: -295px;
    }

    50%,
    70% {
        left: -590px;
    }

    75%,
    95% {
        left: -885px;
    }

    100% {
        left: -1180px;
    }
}

@media (max-width:450px) {
    .box {
        display: none !important;
    }
}
            

4. Use JavaScript to create a Image slider Animation element inside the container:

                
function closeboxt() {
    let box = document.getElementById('box_trand');
    box.classList.add("hide_tele")
} 
            

# Image slider in HTML and CSS For Full Code 👇

 

Download Full Code

 

* Hello buddy, I hope you are doing great and creating awesome projects. Today I have brought a useful project for you. In this project, you will learn to create `Image slider html css | Image slider in css` using HTML CSS, and JavaScript. Yeah, HTML also provides us a select menu with the dropdown feature, but we will you will learn to make it more beautiful and fascinating.