CSS Carousel

by MD Hasan Patwary

HTML

<article id="top" class="wrapper style1">
   <div class="container">
     <div class="row">
       <div class="slideshow">
         <ul class="baner">
           <li><span>SKUP AUT SPRAWNYCH I USZKODZONYCH <br>GOTÓWKA DO RĘKI</span></li>
           <li><span>SKUP AUT POZNAŃ I WIELKOPOLSKA <br>ZADZWOŃ</span></li>
           <li><span>SKUP AUT SPRAWNYCH I <br>USZKODZONYCH - GOTÓWKA DO RĘKI</span></li>
         </ul>
       </div>
     </div>
   </div>
</article>

CSS

.slideshow {
     margin: 0px auto;
     max-width: 1920px;
     width: 100%;
     height: 450px;
     text-align: center;
     position: relative;
}
 .baner {
     position: absolute;
     padding-left: 0;
     width: 100%;
     height: 450px;
     top: 50px;
     left: 0;
     right: 0;
}
 .baner li {
     list-style: none;
}
 .baner li span {
     padding-top:180px;
     font-size: 40px;
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     color: white;
     font-weight: 400;
     text-align: left;
     letter-spacing: 4px;
     font-family: open-sans, sans-serif;
     background-size: cover;
     background-position: 50% 50%;
     opacity: 0;
     z-index: 2;
     animation: imageAnimation 15s ease infinite 0s;
}
.baner li span::after {
    content: "";
     background-color: #00000066;
     width: 50%;
     height: 25%;
     top: 170px;
     position: absolute;
     left: 0px;
     z-index: -1;
}
 .baner li:nth-child(1) span {
     background-image : url(https://images.pexels.com/photos/19964831/pexels-photo-19964831/free-photo-of-blue-heron.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load);
}
 .baner li:nth-child(2) span {
     background-image: url(https://images.pexels.com/photos/12489311/pexels-photo-12489311.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load);
     animation-delay: 5s;
}
 .baner li:nth-child(3) span {
     background-image : url(https://images.pexels.com/photos/20744632/pexels-photo-20744632/free-photo-of-a-church-sits-on-top-of-a-hill-overlooking-a-valley.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load);
     animation-delay: 10s;
}
 @keyframes imageAnimation {
     0% {
         opacity: 0;
    }
     13% {
         opacity: 1;
    }
     25% {
         opacity: 1;
    }
     37% {
         opacity: 0;
    }
     100% {
         opacity: 0;
    }
}