Full Screen Slider Code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Full Screen Slider</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="slider"> <div class="slide"> <h1>Slide1</h1> </div> <div class="slide"> <h1>Slide2</h1> </div> <div class="slide"> <h1>Slide3</h1> </div> <div class="slide"> <h1>Slide4</h1> </div> <div class="slide"> <h1>Slide5</h1> </div> </div> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; } .container { width: 100%; position: relative; overflow-x: hidden; } .slider { position: relative; width: 500%; animation: animate 10s linear infinite; } .slide { position: relative; width: 20%; float: left; height: 100vh; } h1 { margin: 0; padding: 0; position: absolute; top: 50%; transform: translateY(-50%); text-align: center; font-size: 6em; width: 100%; background: rgba(0,0,0,0.6); color: white; font-family: Verdana, Geneva, Tahoma, sans-serif; } .slide { background-size: cover; } .slide:nth-child(1) { background: url(1.png); } .slide:nth-child(2) { background: url(2.png); } .slide:nth-child(3) { background: url(3.png); } .slide:nth-child(4) { background: url(4.png); } .slide:nth-child(5) { background: url(5.png); } @keyframes animate { 0% { left: 0; } 16% { left: 0; } 20% { left: -100%; } 30% { left: -100%; } 40% { left: -200%; } 56% { left: -200%; } 60% { left: -300%; } 76% { left: -300%; } 80% { left: -400%; } 96% { left: -400%; } 100% { left: 0; } }
