Reszponzív slider / fader JavaScript nélkül

2020-10-06

Képrotáló carousel készítéséhez nem feltétlenül van szükség JavaScript-re. Néhány sor CSS-sel is látványos eredményt érhetünk el.

A működő kódot ide kattintva tudod megnézni.

Videó

Videó

HTML forráskód


<div class="carousel fader">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="carousel slider">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS forráskód


* { box-sizing: border-box; margin: 0 }
body { background: #424242 }

.carousel {
    max-width: 1000px;
    width: 90%;
    height: 40vh;
    margin: 40px auto;
    box-shadow: 0 30px 40px -20px rgba(0,0,0,.5);
    position: relative;
    overflow: hidden
}
@media(orientation:portrait) {
    .carousel { height: 30vh }
}
.carousel div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-position: center center;
    background-size: cover;
    opacity: 0
}
.carousel div:nth-child(1) { background-image: url('../pics/slide1.jpg') }
.carousel div:nth-child(2) { background-image: url('../pics/slide2.jpg'); animation-delay: 4s }
.carousel div:nth-child(3) { background-image: url('../pics/slide3.jpg'); animation-delay: 8s }

.fader div { animation: fade 12s infinite }
@keyframes fade {
    0%, 40% { opacity: 0 }
    10%, 35% { opacity: 1 }
}

.slider div { left: -100%; animation: slide 12s infinite }
@keyframes slide {
    0%, 40%  { opacity: 0;  }
    1%    { opacity: 1; left: -100% }
    6%, 34.5%  { left: 0 }
    39.5% { opacity: 1; left: 100% }
}

.carousel.slider { opacity: 0; animation: carousel-fade-in 2s forwards }
@keyframes carousel-fade-in {
    0%, 40%  { opacity: 0 }
    100% { opacity: 1 }
}