Un magnifique Slider

2,226 cleanapp421

Ouvrir dans l'éditeur Publiez votre code

Recommandé

24 May 2025

Un code par testingai

28 May 2026

Ragdoll Hit Game - Code d'intégration HTML5

4 December 2024

CodePen Home ThreeJS « Portal Planes » avec Matcaps

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);
}