CODEWITHSUNDEEP
javascripthtmlcss
João Victor
João Victor

Reputation: 21

Slider using HTML and CSS

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>

Upvotes: 2

Views: 351

Answers (3)

Arun Kumar
Arun Kumar

Reputation: 78

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

<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="slides_wrap">
        <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>
      

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

Explanation-

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

Upvotes: 1

Manas Khandelwal
Manas Khandelwal

Reputation: 3921

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

Upvotes: 3

Simon
Simon

Reputation: 142

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;
}
<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 second">
        <img src="https://i.picsum.photos/id/904/800/500.jpg?hmac=UsFMYKu8PL-Yk1NeGs_NZHHZ3Q0ByEgtlh1Yf7NkJpE" alt="Imagem do Chalé">
      </div>
      <div class="slide third">
        <img src="https://i.picsum.photos/id/1058/800/500.jpg?hmac=bUPRpfGU_XV3oiMQYMsgldpsA7dFcibw-73lZGxew50" alt="Imagem do Chalé">
      </div>
      <div class="slide fourth">
        <img src="https://i.picsum.photos/id/575/800/500.jpg?hmac=PXi7kmt03wjtsx1P6z0UrgW2G-A_pWeGVkeyWCsGytU" alt="Imagem do Chalé">
      </div>
      <div class="slide fifth">
        <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>

Upvotes: 0

Related Questions