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

[head]Code (PHP)[/head] [php] <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> [/php] [head]Code (PHP)[/head] [php] .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%; } [/php]