CSS บริสุทธิ์ตัวเลื่อนแบบง่าย
นี่คือตัวอย่างบางส่วน:
(tested only on 30)(tested only on 24)9 ไม่มีช่วงการเปลี่ยนภาพ10+ ทำงานได้สมบูรณ์แบบ(tested only on 12) รวม CSS Stylesheet ที่ส่วนท้ายขององค์ประกอบ <head> :
< link rel =" stylesheet " href =" /path/to/csslider.css " />ใส่รหัสลงในหน้าเว็บ:
< div class =" csslider " >
< input type =" radio " name =" slides " id =" slides_1 " checked />
< input type =" radio " name =" slides " id =" slides_2 " />
< input type =" radio " name =" slides " id =" slides_3 " />
< input type =" radio " name =" slides " id =" slides_4 " />
< input type =" radio " name =" slides " id =" slides_N " />
< ul >
< li > Content of slide 1 </ li >
< li > Content of slide 2 </ li >
< li > Content of slide 3 </ li >
< li > Content of slide 4 </ li >
< li > Content of slide N </ li >
</ ul >
< div class =" arrows " >
< label for =" slides_1 " > </ label >
< label for =" slides_2 " > </ label >
< label for =" slides_3 " > </ label >
< label for =" slides_4 " > </ label >
< label for =" slides_N " > </ label >
< label for =" slides_1 " class =" goto-first " > </ label >
< label for =" slides_N " class =" goto-last " > </ label >
</ div >
< div class =" navigation " >
< div >
< label for =" slides_1 " > </ label >
< label for =" slides_2 " > </ label >
< label for =" slides_3 " > </ label >
< label for =" slides_4 " > </ label >
< label for =" slides_N " > </ label >
</ div >
</ div >
</ div >รหัสคุณสามารถสร้างจากไฟล์เทมเพลต Jade ได้ที่นี่
การกำหนดค่าเริ่มต้นสามารถตั้งค่าในไฟล์น้อยกว่า
หากคุณต้องการเปลี่ยนการกำหนดค่าสำหรับองค์ประกอบเฉพาะคุณต้องแทนที่การกำหนดค่าเริ่มต้น ตัวอย่างเช่นหากคุณมีองค์ประกอบที่มี ID #my-slider และคุณต้องการเปลี่ยน:
# my-slider . arrows label {
border-left-color : red;
border-right-color : red;
} # my-slider . inside . navigation label {
border : 1 px solid red;
}
