Webleb - HTML UI Elements -

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

9 June 2025

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

JS

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

Consigliato

Un codice di Mete

YouMusic-U-personal-Music

HTML

CSS

JS

Consigliato

Un codice di Mete

YouMusic-U-personal-Music

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS