ผมติดปัญหาเกี่ยวกับการเขียน ตัว 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
02-01-2020
21:02:09
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม
สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
-
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ
