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

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ผมติดปัญหาเกี่ยวกับการเขียน ตัว active sliber ครับ

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

ผมกำลังเขียนในส่วนของการทำ slider ครับ เเต่ตัวที่ผมเขียน ผมเขียนเป็น แบบ javascript ซึ่ง การทำงานของมันก็คือ 
เมื่อเข้ามาหน้าเเรกของตัว slider มันจะยังไม่ขึ้นในส่วนของตัว active ผมจะต้องกดแอดหน้าเข้าไปก่อนครับ มันจึงจะมีการขึ้นตัว 
active เป็นสีขึ้นมา เเต่ผมต้องการจะทำเป็นแบบ เมื่อเข้ามาหน้าเเเรกก็ให้ขึ้นตัว active เเสดงเลยครับว่าตอนนี้ อยู่ในหน้าไหน 
ซึ่งในที่นี้คิดว่า ผมควรต้องใช้ jquery เข้ามาช่วย ดังนั้นรบกวนพี่ๆ ช่วยเเนะนำ หรือตัวออย่างให้หน่อยครับ
 
[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]


Antinew007 49.49.242.xxx 02-01-2020 21:02:09

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ เข้าใช้งานด้วย Facebook คลิก )






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ