So I've been trying to make a slider in with HTML and CSS and I'm getting this problem, the second slide is showing the third img
and, when I click in the third slide it rushes all the way to the end. I've tried so many different ways, even tried to use lists but I think this is the best method. I would like some advice and help, IDK how I could fix this or how I could get a working slider. thank you. ps: I haven't finished it yet, I'm also planning on doing an auto slider with Javascript.
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400&display=swap'); img { width: 800px; height: 500px; } body { margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: #f5fff5; } .slider { width: 800px; height: 500px; border-radius: 10px; overflow: hidden; } .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 #e6ffe6; padding: 5px; border-radius: 10px; cursor: pointer; transition: 1s; } .manual-btn:not(:last-child) { margin-right: 40px; } .manual-btn:hover { background: #e6ffe6; } #radio1:checked~.first { margin-left: 0; } #radio2:checked~.first { margin-left: -10%; } #radio3:checked~.first { margin-left: -20%; } #radio4:checked~.first { margin-left: -30%; } #radio5:checked~.first { margin-left: -40%; } #radio6:checked~.first { margin-left: -50%; } #radio7:checked~.first { margin-left: -60%; } #radio8:checked~.first { margin-left: -70%; } .navigation-auto { position: absolute; display: flex; width: 800px; justify-content: center; margin-top: 460px; } .navigation-auto div { border: 2px solid #e6ffe6; padding: 5px; border-radius: 10px; cursor: pointer; transition: 1s; } .navigation-auto div:not(:last-child) { margin-right: 40px; } #radio1:checked~.navigation-auto.auto-btn1 { background: #e6ffe6; } #radio2:checked~.navigation-auto.auto-btn2 { background: #e6ffe6; } #radio3:checked~.navigation-auto.auto-btn3 { background: #e6ffe6; } #radio4:checked~.navigation-auto.auto-btn4 { background: #e6ffe6; } #radio5:checked~.navigation-auto.auto-btn5 { background: #e6ffe6; } #radio6:checked~.navigation-auto.auto-btn6 { background: #e6ffe6; } #radio7:checked~.navigation-auto.auto-btn7 { background: #e6ffe6; } #radio8:checked~.navigation-auto.auto-btn8 { background: #e6ffe6; }<body> <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"> <input type="radio" name="radio-btn" id="radio5"> <input type="radio" name="radio-btn" id="radio6"> <input type="radio" name="radio-btn" id="radio7"> <input type="radio" name="radio-btn" id="radio8"> <div class="slide first"> <img src="https://i.picsum.photos/id/1069/800/500.jpg?hmac=cqS1B5uwu58phxn3aaReeQrihXW002te7WfO3aBskwE" alt="Imagem do Chalé"> </div> <div class="slide first"> <img src="https://i.picsum.photos/id/290/800/500.jpg?hmac=FYjq1vUp3-qL3XiaJ5gVyq1gVD0GydYSHi_SnoE_XDo" alt="Imagem do Chalé"> </div> <div class="slide first"> <img src="https://i.picsum.photos/id/904/800/500.jpg?hmac=UsFMYKu8PL-Yk1NeGs_NZHHZ3Q0ByEgtlh1Yf7NkJpE" alt="Imagem do Chalé"> </div> <div class="slide first"> <img src="https://i.picsum.photos/id/1058/800/500.jpg?hmac=bUPRpfGU_XV3oiMQYMsgldpsA7dFcibw-73lZGxew50" alt="Imagem do Chalé"> </div> <div class="slide first"> <img src="https://i.picsum.photos/id/575/800/500.jpg?hmac=PXi7kmt03wjtsx1P6z0UrgW2G-A_pWeGVkeyWCsGytU" alt="Imagem do Chalé"> </div> <div class="slide first"> <img src="https://i.picsum.photos/id/185/800/500.jpg?hmac=vDnfv1YP687hpdh5tkmPRFGZr39KJ4tmDoBAFxfcv5g" alt="Imagem do Chalé"> </div> <div class="slide first"> <img src="https://i.picsum.photos/id/568/800/500.jpg?hmac=qfxU9rccPLybsDI_nX3evof4xp3xoejdio13fmXLPkc" alt="Imagem do Chalé"> </div> <div class="slide first"> <img src="https://i.picsum.photos/id/825/800/500.jpg?hmac=qfqZS9cky-mslO4miTMNhQ8Xe6O2INVQXly-3mRXsJc" alt="Imagem do Chalé"> </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 class="auto-btn5"></div> <div class="auto-btn6"></div> <div class="auto-btn7"></div> <div class="auto-btn8"></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> <label for="radio5" class="manual-btn"></label> <label for="radio6" class="manual-btn"></label> <label for="radio7" class="manual-btn"></label> <label for="radio8" class="manual-btn"></label> </div> </div> </body>
没有评论:
发表评论