0

I am trying to create a manual sliding carousel with navigation dots below. User can click on the dots to navigate. I am using the radio button + label hack for it. The problem is on clicking the label the radio button is getting clicked but the navigation is not happening, in other words, the images are not sliding.

It already took me 2 days trying to figure it out. But I can't.

here is my HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <title>Slider</title>
</head>
<body>
    <div class="slider">

        <div class="slider__radio">
            <input type="radio" name="slider__radios" id="slider__radio--1" checked>
            <input type="radio" name="slider__radios" id="slider__radio--2">
            <input type="radio" name="slider__radios" id="slider__radio--3">
        </div> 
        
        <div class="slides">           
            <div class="slide slide__only">
                <img src="1.jpg" alt="">
            </div>

            <div class="slide">
                <img src="2.jpg" alt="">
            </div>

            <div class="slide">
                <img src="3.jpg" alt="">
            </div>
        </div>

        <div class="slides__label">
            <label for="slider__radio--1" class="slides__btn slides__btn1"></label>
            <label for="slider__radio--2" class="slides__btn slides__btn2"></label>
            <label for="slider__radio--3" class="slides__btn slides__btn3"></label>
        </div>

    </div>
</body>
</html>

and here is the CSS

.slider__radio {
  display: none;
}

.slider {
  width: 90vw;
  margin: auto;
  overflow: hidden;
  height: auto;
  border-radius: 10px;
}

.slides {
  width: 300%;
  display: flex;
}

.slide {
  width: 90vw;
  transition: 2s;
}

.slide img {
  width: 100%;
}

.slides__btn:hover {
  background-color: #fff;
}

.slides__label {
  position: absolute;
  width: 100%;
  left: 0;
  top: 45%;
  display: flex;
  justify-content: center;
}

.slides__btn {
  padding: 8px;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
  transition: all 0.5s;
}

.slides__btn:not(:last-child) {
  margin-right: 20px;
}

#slider__radio--1:checked ~ .slide__only {
  margin-left: 0;
}

#slider__radio--2:checked ~ .slide__only {
  margin-left: -33.33333%;
}

#slider__radio--3:checked ~ .slide__only {
  margin-left: -66.66666%;
}
Shubham Gupta
  • 1
  • 1
  • 1
    The `#slider__radio--3:checked` and `.slides` elements are not siblings, therefore the sibling selector `~` will not apply. – Sean Jan 27 '21 at 18:45
  • 1
    @Sean You solved my problem and cleared my concept. I can't thank you enough. Still, thank you very much. – Shubham Gupta Jan 27 '21 at 19:04

0 Answers0