Un magnifique Slider

1,848 cleanapp421

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 March 2026

Baldie's Basics Plus

19 December 2025

Intégrer un jeu Unity : football Ragdoll

16 January 2026

Code d'intégration du jeu Flash (Ruffle Player)

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>imageSlider</title>
    <link rel="stylesheet" href="css/imageSlider.css">
</head>

<body>
    <header>
        <nav>
            <a href="">Home</a>
            <a href="">Contact</a>
            <a href="">Info</a>
        </nav>
    </header>
    <div class="carousel">
        <div class="list">

<div class="item">
                <img src="./img/img4.jpg" alt="">
                <div class="content">
                    <div class="author">WebAddict</div>
                    <div class="title">Design Slider</div>
                    <div class="topic">Animals</div>
                    <div class="des">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, natus a repellendus eaque velit
                        reiciendis inventore deleniti ipsa impedit molestiae illum unde voluptas, animi quis saepe quos
                        atque neque provident rerum distinctio laborum veniam incidunt itaque. At magnam incidunt alias
                        voluptatibus modi enim eos iste, natus corrupti accusamus nobis cumque?
                    </div>

<div class="item">
                <img src="./img/IMG-20230824-WA0021.jpg" style="object-position: 0 28%; filter:brightness(50%)" alt="">
                <div class="content">
                    <div class="author">WebAddict</div>
                    <div class="title">Design Slider</div>
                    <div class="topic">Animals</div>
                    <div class="des">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, natus a repellendus eaque velit
                        reiciendis inventore deleniti ipsa impedit molestiae illum unde voluptas, animi quis saepe quos
                        atque neque provident rerum distinctio laborum veniam incidunt itaque. At magnam incidunt alias
                        voluptatibus modi enim eos iste, natus corrupti accusamus nobis cumque?
                    </div>

<div class="buttons">
                        <button>See More</button>
                        <button>Next</button>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="./img/img3.jpg" alt="">
                <div class="content">
                    <div class="author">WebAddict</div>
                    <div class="title">Design Slider</div>
                    <div class="topic">Animals</div>
                    <div class="des">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, natus a repellendus eaque velit
                        reiciendis inventore deleniti ipsa impedit molestiae illum unde voluptas, animi quis saepe quos
                        atque neque provident rerum distinctio laborum veniam incidunt itaque. At magnam incidunt alias
                        voluptatibus modi enim eos iste, natus corrupti accusamus nobis cumque?
                    </div>

<div class="buttons">
                        <button>See More</button>
                        <button>Next</button>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="./img/img1.jpg" alt="">
                <div class="content">
                    <div class="author">WebAddict</div>
                    <div class="title">Design Slider</div>
                    <div class="topic">Animals</div>
                    <div class="des">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, natus a repellendus eaque velit
                        reiciendis inventore deleniti ipsa impedit molestiae illum unde voluptas, animi quis saepe quos
                        atque neque provident rerum distinctio laborum veniam incidunt itaque. At magnam incidunt alias
                        voluptatibus modi enim eos iste, natus corrupti accusamus nobis cumque?
                    </div>

<div class="buttons">
                        <button>See More</button>
                        <button>Next</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="thumbnails">
            <div class="item">
                <img src="./img/img4.jpg" alt="">
                <div class="content">
                    <div class="title">
                        Name Slider
                    </div>
                    <div class="des">
                        Description
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="img/IMG-20230824-WA0021.jpg" style="filter: brightness(70%);" alt="">
                <div class="content">
                    <div class="title">
                        Name Slider
                    </div>
                    <div class="des">
                        Description
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="img/img3.jpg" alt="">
                <div class="content">
                    <div class="title">
                        Name Slider
                    </div>
                    <div class="des">
                        Description
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="img/img1.jpg" alt="">
                <div class="content">
                    <div class="title">
                        Name Slider
                    </div>
                    <div class="des">
                        Description
                    </div>
                </div>
            </div>

</div>
        <div class="arrows">
            <button id="prev">
                < </button>
                    <button id="next">></button>
        </div>
        <div class="time"></div>
    </div>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Bebas+Neue&family=Montserrat:wght@400;500;600;700;800;900&family=Oswald:wght@200;400;500;600;700&family=Quicksand:wght@300;400;500;600;700&family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    list-style:none;
}
body{
    font-family: "Poppins", sans-serif;
    background: #000;
    text-decoration: none;
    color: #eee;
    font-size: 12px;
}
header{
    width: 1140px;
    max-width: 80%;
    margin: auto;
    height: 50px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
position: relative;
z-index: 100;
}
a{
    color: #fff;
}
header a{
    margin-right: 40px;
    font-size: 1.2em
}
.carousel{
    margin-top: -50px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
img{
    width: 100%;
}

.carousel .list .item{
    position: absolute;
    inset: 0 0 0 0;

}
.carousel .list .item img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    /* filter: brightness(20%); */
}

.carousel .list .item .content{
    position: absolute;
    top: 20%;
    /* background-color: blue; */
    width: 1140px;
    max-width: 80%;
    left: 50%;
    transform: translateX(-50%);
    padding-right: 30px;
    box-sizing: border-box;
    color: white;
    text-shadow: 0 5px 10px #0004;

}
.carousel .content .author{
    /* font-size: 4rem; */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 10px;

}
.carousel .list .content .title, .carousel  .list .content .topic{
    font-weight: bold;
    font-size: 5em;
    line-height: 1.3em;
    margin: 0;
}
.carousel .content .topic{
    color: #f1683a;
}
.carousel .list .item .buttons{
    display: grid;
    grid-template-columns: repeat(2, 130px);
    height: 40px;
    gap: 10px;
    margin-top: 20px;
}
.content button{
    background-color: #eee;
    font-family: Poppins;
    letter-spacing: 3px;
    font-weight: 500;

}
.content button:nth-child(2){
    background: transparent;
    color: #eee;
    border: 1px solid #eee;
}

/* Thumbnails */
.thumbnails{
    position: absolute;
    bottom: 50px;
    left: 50%;
    width: max-content;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.thumbnails .item{
    width: 150px;
    height: 150px;
    flex-shrink: 0;
    position: relative;
}

.thumbnails img{
    width: 100%;
    height: 100%;
 border-radius: 20px;
 /* filter: brightness(90%); */
    object-fit: cover;
}
.thumbnails .content{
    position: absolute;
    bottom: 10px;
    left: 10px
}
.thumbnails .title{
    font-weight: bold;
}
.arrows{
    position: absolute;
    top: 80%;
    right: 52%;
    width: 300px;
    max-width: 30%;
    display: flex;
    align-items: center;
    gap: 10px;
z-index: 9999;
}
.arrows button{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: #eee4;
    color: #fff;
    font-family: monospace;
    font-weight: bold;
    font-size: large;

transition: 0.5s;
}

.arrows button:hover{
    background: #fff;
    color: #555;
}
.carousel .list .item:nth-child(1){
    z-index: 1;
}
.carousel .list .item:nth-child(1) .author,
.carousel .list .item:nth-child(1) .title,
.carousel .list .item:nth-child(1) .topic,
.carousel .list .item:nth-child(1) .des,
.carousel .list .item:nth-child(1) .buttons{
    transform: translateY(50px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent 0.5s .5s linear 1 forwards;
}
@keyframes showContent {
    to{
        opacity: 1;
        filter: blur(0px);
        transform: translateY(0px);
    }
}
.carousel .list .item:nth-child(1) .title{
    animation-duration: 1.2s;
}
.carousel .list .item:nth-child(1) .topic{
    animation-duration: 1.4s;
}
.carousel .list .item:nth-child(1) .des{
    animation-delay: 1.6s
}
.carousel .list .item:nth-child(1) .buttons{
    animation-delay: 1.8s
}

/* Effects */
.carousel.next .list .item:nth-child(1) img{
    width: 150px;
    height: 220px;
    position: absolute;
    left: 50%;
bottom: 50px;
border-radius: 20px;
animation: showImage 0.5s linear 1 forwards;    
}
@keyframes showImage {
    to{
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius:0;
}
}
.carousel.next .thumbnails .item:nth-last-child(1){
    width: 0;
    overflow: hidden;
    animation: showThumbnail .5s linear 1 forwards;
}
@keyframes showThumbnail {
    to{
        width: 150px;
    }
}

.carousel.next .thumbnails{
    transform: translateX(150px);
    transform: translateX(150px);
    animation: transformThumbnail .5s linear 1 forwards;
}
@keyframes transformThumbnail {
    to{
        transform: translateX(0);
    }
}
/* prev */
.carousel.prev  .list .item:nth-child(2){
    z-index: 2;

}
.carousel.prev .list .item:nth-child(2) img{
    position: absolute;
    bottom: 0;
    left: 0;
    animation: outImage 0.5s linear 1 forwards;
}
@keyframes outImage {
    to{
        width: 150px;
        height: 150px;
        border-radius: 20px;
        left: 50%;
        bottom: 50px;
    }
}
.carousel.prev .thumbnails .item:nth-child(1){
    width: 0;
    overflow: hidden;
    opacity: 0;
    animation: showThumbnail 0.5s linear 1 forwards;
}
.carousel.prev .list .item:nth-child(2) .author,
.carousel.prev .list .item:nth-child(2) .title,
.carousel.prev .list .item:nth-child(2) .topic,
.carousel.prev .list .item:nth-child(2) .des,
.carousel.prev .list .item:nth-child(2) .buttons{
    animation: contentOut 1.5s 1 forwards;
}
@keyframes contentOut {
    to{
        transform: translateY(-150px);
        filter: blur(20px);
        opacity: 0;
    }
}
.carousel.next .arrows button,
.carousel.prev .arrows button{
    /* pointer-events: none; */
}
.time{
    position: absolute;
    width: 0%;
    height: 5px;
    background: #f1683a;
    z-index: 100;
}
.carousel.next .time,
.carousel.prev .time{
    width: 100%;
    animation: timeRunning 2s linear 1 forwards;
}
@keyframes timeRunning {
    to{
        width: 0;
    }
}
@media screen and (max-width:678px) {
    .carousel .list .item .content{
        padding: 0;
    }
    .carousel .list .item .content .title{
        font-size: 30px;
    }
}

let carouselDom = document.querySelector(".carousel");
let listItemDom = document.querySelector(".carousel .list");
let thumbNailsDom = document.querySelector(".carousel .thumbnails");
let nextBtn = document.getElementById("next");
let prevBtn = document.getElementById("prev");

nextBtn.onclick = () => {
  showSlider("next");
};
prevBtn.onclick = () => {
  showSlider("prev");
};
let timeRunning = 3000;
let runTimeout;
let timeAutoNext = 5000;
let autoRun;

autoRun = setTimeout(() => {
  nextBtn.click();
}, timeAutoNext);
function showSlider(type) {
  let itemSlider = document.querySelectorAll(".carousel .list .item");
  let itemThumbNails = document.querySelectorAll(".carousel .thumbnails .item");
  if (type === "next") {
    listItemDom.appendChild(itemSlider[0]);
    thumbNailsDom.appendChild(itemThumbNails[0]);
    carouselDom.classList.add("next");
  } else {
    let positionLastItem = itemSlider.length - 1;
    listItemDom.prepend(itemSlider[positionLastItem]);
    thumbNailsDom.prepend(itemThumbNails[positionLastItem]);
    carouselDom.classList.add("prev");
  }
  clearTimeout(runTimeout);
  runTimeout = setTimeout(() => {
    carouselDom.classList.remove("next");
    carouselDom.classList.remove("prev");
  }, timeRunning);
  clearTimeout(autoRun);
  autoRun = setTimeout(() => {
    nextBtn.click();
  }, timeAutoNext);
}