Webleb - Snippet di Codice -

1580 cleanapp421

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

2 March 2025

Carta capovolta

18 December 2025

Caricatore di giochi Unity WebGL Slope Plus

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

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

Carta capovolta

Caricatore di giochi Unity WebGL Slope Plus

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS