ติผมดปัญหาเกี่ยวกับการเขียน acitive ตัว slider ครับ

            <div id="slider">
                                                <figure>
                                                    <div class="slidershow middle">
                                                        <div class="slides">
                                                            <input type="radio" name="r" id="r1" checked>
                                                            <input type="radio" name="r" id="r2">
                                                            <input type="radio" name="r" id="r3">
                                                            <div class="slide s1">
                                                                <?php include 'body_home_carousel_page1.php'; ?>
                                                            </div>
                                                            <div class="slide">
                                                                <?php include 'body_home_carousel_page2.php'; ?> 
                                                            </div>
                                                            <div class="slide">
                                                                <?php include 'body_home_carousel_page3.php'; ?>  
                                                            </div>
                                                        </div>
                                                        <div class="navigation">
                                                            <label for="r1" class="bar"></label>
                                                            <label for="r2" class="bar"></label>
                                                            <label for="r3" class="bar"></label>
                                                        </div>
                                                    </div>
                                                </figure>
                                            </div>
                                        <script>
                                            var elements = document.getElementsByClassName("bar");
                                            for (var i = 0; i < elements.length; i++)
                                            {
                                                elements[i].onclick = function () {
                                                    // remove class from sibling
                                                    var el = elements[0];
                                                    while (el)
                                                    {
                                                        if (el.tagName === "LABEL") {
                                                            //remove class
                                                            el.classList.remove("bak");

                                                        }
                                                            // pass to the new sibling
                                                        el = el.nextSibling;
                                                    }
                                                    this.classList.add("bak");
                                                };
                                            }
                                        </script> 

.slidershow{
  width: 123%;
  overflow: hidden;
  transform: translate(-9%,-15%);
}
 
.navigation{
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}


.bar{
  width: 12px;
  height: 11px;
  border: 0px solid #fff;
  margin: 6px;
  cursor: pointer;
  transition: 0.4s;
  background-color:#fff;
}

.bar .active {
  background: #f3ca2f;
}


input[name="r"]{
    position: absolute;
    visibility: hidden;
}

.slides{
  width: 451%;
  height: 100%;
  display: flex;

}

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


#r1:checked ~ .s1{
  margin-left: 0;
}
#r2:checked ~ .s1{
  margin-left: -20%;
}
#r3:checked ~ .s1{
  margin-left: -40%;
}
#r4:checked ~ .s1{
  margin-left: -60%;
}
#r5:checked ~ .s1{
  margin-left: -80%;
}