My slideshow is not coming under the header, it is next to the header. I tried flex but the slider just broke. I tried increasing the padding and margin but that did not work too.
HTML CODE
HTML Code (Full Code)
<div class="slider"> <div class="slides"> <input type="radio" name="radio-btn" id="radio1"> <input type="radio" name="radio-btn" id="radio2"> <input type="radio" name="radio-btn" id="radio3"> <input type="radio" name="radio-btn" id="radio4"> <div class="slide first"> <img src="img/Temp1.jfif" alt=""> </div> <div class="slide"> <img src="img/temp2.jpg" alt=""> </div> <div class="slide"> <img src="img/" alt=""> </div> <div class="slide"> <img src="img/" alt=""> </div> <div class="navigation-auto"> <div class="auto-btn1"></div> <div class="auto-btn2"></div> <div class="auto-btn3"></div> <div class="auto-btn4"></div> </div> </div> <div class="navigation-manual"> <label for="radio1" class="manual-btn"></label> <label for="radio2" class="manual-btn"></label> <label for="radio3" class="manual-btn"></label> <label for="radio4" class="manual-btn"></label> </div> </div>
CSS CODE
CSS Code (Code too big)
JAVASCRIPT CODE
setInterval(function(){ document.getElementById('radio' + counter).checked = true; counter++; if(counter > 4){ counter = 1; } }, 5000);
Please Help me fix this bug.
Advertisement
Answer
You should remove display: flex
from body
styles in CSS
body{ margin-bottom: 1000px; padding: 0; height: 100vh; /*display: flex;*/ /*Remove this*/ justify-content: center; align-items: center; background: white; } .slider{ width: 800px; height: 500px; border-radius: 10px; overflow: hidden; align-content: bottom; } .slides{ width: 500%; height: 500px; display: flex; } .slides input{ display: none; } .slide{ width: 20%; transition: 2s; } .slide img{ width: 800px; height: 500px; } .navigation-manual{ position: absolute; width: 800px; margin-top: -40px; display: flex; justify-content: center; } .manual-btn{ border: 2px solid #40D3DC; padding: 5px; border-radius: 10px; cursor: pointer; transition: 1s; } .manual-btn:not(:last-child){ margin-right: 40px; } .manual-btn:hover{ background: #40D3DC; } #radio1:checked ~ .first{ margin-left: 0; } #radio2:checked ~ .first{ margin-left: -20%; } #radio3:checked ~ .first{ margin-left: -40%; } #radio4:checked ~ .first{ margin-left: -60%; } /*css for automatic navigation*/ .navigation-auto{ position: absolute; display: flex; width: 800px; justify-content: center; margin-top: 460px; } .navigation-auto div{ border: 2px solid #40D3DC; padding: 5px; border-radius: 10px; transition: 1s; } .navigation-auto div:not(:last-child){ margin-right: 40px; } #radio1:checked ~ .navigation-auto .auto-btn1{ background: #40D3DC; } #radio2:checked ~ .navigation-auto .auto-btn2{ background: #40D3DC; } #radio3:checked ~ .navigation-auto .auto-btn3{ background: #40D3DC; } #radio4:checked ~ .navigation-auto .auto-btn4{ background: #40D3DC; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Name</title> </head> <!--Connections--> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="CSS/style.css"> <script src="TS/script.ts"></script> <script src="JS/slide.js"></script> <!--Header--> <body> <div id="Header"> <header class="text-gray-600 body-font"> <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center"> <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0"> <img src="img/Fashion Bud Logo.png" width="70" height="70"> <span class="ml-3 text-xl">Name</span> </a> <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center"> <a class="mr-5 hover:text-gray-900" style="cursor: pointer;">Home</a> <a class="mr-5 hover:text-gray-900" style="cursor: pointer;">Magazine</a> <a class="mr-5 hover:text-gray-900" style="cursor: pointer;">Gallery</a> <a class="mr-5 hover:text-gray-900" style="cursor: pointer;">Blog</a> <a class="mr-5 hover:text-gray-900" style="cursor: pointer;">Contact Us</a> </nav> </div> </header> </div> <hr class="hr"> <!--Slider--> <div class="slider"> <div class="slides"> <input type="radio" name="radio-btn" id="radio1"> <input type="radio" name="radio-btn" id="radio2"> <input type="radio" name="radio-btn" id="radio3"> <input type="radio" name="radio-btn" id="radio4"> <div class="slide first"> <img src="img/Temp1.jfif" alt=""> </div> <div class="slide"> <img src="img/temp2.jpg" alt=""> </div> <div class="slide"> <img src="img/" alt=""> </div> <div class="slide"> <img src="img/" alt=""> </div> <div class="navigation-auto"> <div class="auto-btn1"></div> <div class="auto-btn2"></div> <div class="auto-btn3"></div> <div class="auto-btn4"></div> </div> </div> <div class="navigation-manual"> <label for="radio1" class="manual-btn"></label> <label for="radio2" class="manual-btn"></label> <label for="radio3" class="manual-btn"></label> <label for="radio4" class="manual-btn"></label> </div> </div> </body> </html>