Slider using HTML and CSS

Question

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;
}

user_11171286 · Answer

Just some maths was wrong.

You can do something like this:

@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: 800%;
  height: 500px;
  display: flex;
}

.slides input {
  display: none;
}

.slide {
  width: 100%;
  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: -12.5%;
}

#radio3:checked~.first {
  margin-left: -25%;
}

#radio4:checked~.first {
  margin-left: -37.5%;
}

#radio5:checked~.first {
  margin-left: -50%;
}

#radio6:checked~.first {
  margin-left: -62.5%;
}

#radio7:checked~.first {
  margin-left: -75%;
}

#radio8:checked~.first {
  margin-left: -87.5%;
}

.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,
#radio2:checked~.navigation-auto.auto-btn2,
#radio3:checked~.navigation-auto.auto-btn3,
#radio4:checked~.navigation-auto.auto-btn4,
#radio5:checked~.navigation-auto.auto-btn5,
#radio6:checked~.navigation-auto.auto-btn6,
#radio7:checked~.navigation-auto.auto-btn7,
#radio8:checked~.navigation-auto.auto-btn8 {
  background: #e6ffe6;
}

body {
  background-color: #111111;
}

user_2077634 · Answer

This should work as expected

https://codepen.io/arun369/pen/dyNZeLz


        @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; 
}

.slides input#radio1{left: 0px; }
.slides input#radio2{left: 20px; }
.slides input#radio3{left: 40px; }
.slides input#radio4{left: 60px; }
.slides input#radio5{left: 80px; }
.slides input#radio6{left: 100px; }
.slides input#radio7{left: 120px; }
.slides input#radio8{left: 140px; }

.slide {
  width: 20%;
  transition: 2s;
}

.slides_wrap {
  transition: 2s; display: flex;
}

.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: -400px;
}

#radio3:checked~.first {
  margin-left: -800px;
}

#radio4:checked~.first {
  margin-left: -30px;
}

#radio5:checked~.first {
  margin-left: -40px;
}

#radio6:checked~.first {
  margin-left: -50px;
}

#radio7:checked~.first {
  margin-left: -60px;
}

#radio8:checked~.first {
  margin-left: -70px;
}*/

#radio1:checked~.slides_wrap {
  margin-left: 0;
}

#radio2:checked~.slides_wrap {
  margin-left: -800px;
}

#radio3:checked~.slides_wrap {
  margin-left: -1600px;
}

#radio4:checked~.slides_wrap {
  margin-left: -2400px;
}

#radio5:checked~.slides_wrap {
  margin-left: -3200px;
}

#radio6:checked~.slides_wrap {
  margin-left: -4000px;
}

#radio7:checked~.slides_wrap {
  margin-left: -4800px;
}

#radio8:checked~.slides_wrap {
  margin-left: -5600px;
}

.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;
}

HTML

Explanation-

Just added a container for all the slides.
Instead of moving the individual slides(as you will need more calculation for every item), I moved the container
Every time you click, the outer container shifts well which makes it work correctly.

user_3843085 · Answer

Your Image div all have the same class.

If you rename the div with separate classes: first, second etc. Then add margins as multiples of the image width as I have shown it will work.

Note* It won't work when the screen is smaller than the width. If you want it to work on smaller screens you would need to use a percentage on the image size and related offsets.

Very nice work though.

@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~.second {
  margin-left: -1600px;
}

#radio3:checked~.third {
  margin-left: -2400px;
}

#radio4:checked~.fourth {
  margin-left: -3200px;
}

#radio5:checked~.fifth {
  margin-left: -4000px;
}

#radio6:checked~.first {
  margin-left: -50px;
}

#radio7:checked~.first {
  margin-left: -60px;
}

#radio8:checked~.first {
  margin-left: -70px;
}

.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;
}

Slider using HTML and CSS

3 Answers