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)
JavaScript
x
35
35
1
<div class="slider">2
<div class="slides">3
<input type="radio" name="radio-btn" id="radio1">4
<input type="radio" name="radio-btn" id="radio2">5
<input type="radio" name="radio-btn" id="radio3">6
<input type="radio" name="radio-btn" id="radio4">7
<div class="slide first">8
<img src="img/Temp1.jfif" alt="">9
</div>10
<div class="slide">11
<img src="img/temp2.jpg" alt="">12
</div>13
<div class="slide">14
<img src="img/" alt="">15
</div>16
<div class="slide">17
<img src="img/" alt="">18
</div>19
20
<div class="navigation-auto">21
<div class="auto-btn1"></div>22
<div class="auto-btn2"></div>23
<div class="auto-btn3"></div>24
<div class="auto-btn4"></div>25
</div>26
</div>27
28
<div class="navigation-manual">29
<label for="radio1" class="manual-btn"></label>30
<label for="radio2" class="manual-btn"></label>31
<label for="radio3" class="manual-btn"></label>32
<label for="radio4" class="manual-btn"></label>33
</div>34
</div>35
CSS CODE
CSS Code (Code too big)
JAVASCRIPT CODE
JavaScript
1
8
1
setInterval(function(){2
document.getElementById('radio' + counter).checked = true;3
counter++;4
if(counter > 4){5
counter = 1;6
}7
}, 5000);8
Please Help me fix this bug.
Advertisement
Answer
You should remove display: flex from body styles in CSS
JavaScript
1
115
115
1
body{2
margin-bottom: 1000px;3
padding: 0;4
height: 100vh;5
/*display: flex;*/ /*Remove this*/6
justify-content: center;7
align-items: center;8
background: white;9
}10
11
12
.slider{13
width: 800px;14
height: 500px;15
border-radius: 10px;16
overflow: hidden;17
align-content: bottom;18
}19
20
.slides{21
width: 500%;22
height: 500px;23
display: flex;24
}25
26
.slides input{27
display: none;28
}29
30
.slide{31
width: 20%;32
transition: 2s;33
}34
35
.slide img{36
width: 800px;37
height: 500px;38
}39
40
.navigation-manual{41
position: absolute;42
width: 800px;43
margin-top: -40px;44
display: flex;45
justify-content: center;46
}47
48
.manual-btn{49
border: 2px solid #40D3DC;50
padding: 5px;51
border-radius: 10px;52
cursor: pointer;53
transition: 1s;54
}55
56
.manual-btn:not(:last-child){57
margin-right: 40px;58
}59
60
.manual-btn:hover{61
background: #40D3DC;62
}63
64
#radio1:checked ~ .first{65
margin-left: 0;66
}67
68
#radio2:checked ~ .first{69
margin-left: -20%;70
}71
72
#radio3:checked ~ .first{73
margin-left: -40%;74
}75
76
#radio4:checked ~ .first{77
margin-left: -60%;78
}79
80
/*css for automatic navigation*/81
82
.navigation-auto{83
position: absolute;84
display: flex;85
width: 800px;86
justify-content: center;87
margin-top: 460px;88
}89
90
.navigation-auto div{91
border: 2px solid #40D3DC;92
padding: 5px;93
border-radius: 10px;94
transition: 1s;95
}96
97
.navigation-auto div:not(:last-child){98
margin-right: 40px;99
}100
101
#radio1:checked ~ .navigation-auto .auto-btn1{102
background: #40D3DC;103
}104
105
#radio2:checked ~ .navigation-auto .auto-btn2{106
background: #40D3DC;107
}108
109
#radio3:checked ~ .navigation-auto .auto-btn3{110
background: #40D3DC;111
}112
113
#radio4:checked ~ .navigation-auto .auto-btn4{114
background: #40D3DC;115
}JavaScript
1
73
73
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<meta http-equiv="X-UA-Compatible" content="IE=edge">6
<meta name="viewport" content="width=device-width, initial-scale=1.0">7
<title>Name</title>8
</head>9
10
<!--Connections-->11
<script src="https://cdn.tailwindcss.com"></script>12
<link rel="stylesheet" href="CSS/style.css">13
<script src="TS/script.ts"></script>14
<script src="JS/slide.js"></script>15
16
<!--Header-->17
<body>18
<div id="Header">19
<header class="text-gray-600 body-font">20
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">21
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">22
<img src="img/Fashion Bud Logo.png" width="70" height="70">23
<span class="ml-3 text-xl">Name</span>24
</a>25
<nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">26
<a class="mr-5 hover:text-gray-900" style="cursor: pointer;">Home</a>27
<a class="mr-5 hover:text-gray-900" style="cursor: pointer;">Magazine</a>28
<a class="mr-5 hover:text-gray-900" style="cursor: pointer;">Gallery</a>29
<a class="mr-5 hover:text-gray-900" style="cursor: pointer;">Blog</a>30
<a class="mr-5 hover:text-gray-900" style="cursor: pointer;">Contact Us</a>31
</nav>32
</div>33
</header>34
</div>35
<hr class="hr">36
37
<!--Slider-->38
<div class="slider">39
<div class="slides">40
<input type="radio" name="radio-btn" id="radio1">41
<input type="radio" name="radio-btn" id="radio2">42
<input type="radio" name="radio-btn" id="radio3">43
<input type="radio" name="radio-btn" id="radio4">44
<div class="slide first">45
<img src="img/Temp1.jfif" alt="">46
</div>47
<div class="slide">48
<img src="img/temp2.jpg" alt="">49
</div>50
<div class="slide">51
<img src="img/" alt="">52
</div>53
<div class="slide">54
<img src="img/" alt="">55
</div>56
57
<div class="navigation-auto">58
<div class="auto-btn1"></div>59
<div class="auto-btn2"></div>60
<div class="auto-btn3"></div>61
<div class="auto-btn4"></div>62
</div>63
</div>64
65
<div class="navigation-manual">66
<label for="radio1" class="manual-btn"></label>67
<label for="radio2" class="manual-btn"></label>68
<label for="radio3" class="manual-btn"></label>69
<label for="radio4" class="manual-btn"></label>70
</div>71
</div>72
</body>73
</html>