Framework7 - Swiper Slider
คำอธิบาย
แถบเลื่อนตัวเลื่อนเป็นตัวเลื่อนแบบสัมผัสที่ทรงพลังและทันสมัยที่สุดและมาใน Framework7 พร้อมคุณสมบัติมากมาย
เค้าโครง HTML ต่อไปนี้แสดงแถบเลื่อนตัวเลื่อน -
<!-- Container class for slider -->
<div class = "swiper-container">
<!-- Wrapper class for slider -->
<div class = "swiper-wrapper">
<!-- Slides -->
<div class = "swiper-slide">Slide 1</div>
<div class = "swiper-slide">Slide 2</div>
<div class = "swiper-slide">Slide 3</div>
... other slides ...
</div>
<!-- Define pagination, if it is required -->
<div class = "swiper-pagination"></div>
</div>
คลาสต่อไปนี้ใช้สำหรับตัวเลื่อนตัวเลื่อน -
swiper-container - เป็นองค์ประกอบที่จำเป็นสำหรับคอนเทนเนอร์ตัวเลื่อนหลักและใช้สำหรับสไลด์และเลขหน้า
Swiper-wrapper - เป็นองค์ประกอบที่จำเป็นสำหรับสไลด์กระดาษห่อเพิ่มเติม
swiper-slide - เป็นองค์ประกอบสไลด์เดียวและอาจมี HTML อยู่ภายใน
swiper-pagination - เป็นทางเลือกสำหรับสัญลักษณ์แสดงหัวข้อย่อยและสร้างขึ้นโดยอัตโนมัติ
คุณสามารถเริ่มต้น swiper ด้วย JavaScript โดยใช้วิธีการที่เกี่ยวข้อง -
myApp.swiper(swiperContainer,parameters)
หรือ
new Swiper(swiperContainer, parameters)
ทั้งสองวิธีใช้เพื่อเริ่มต้นตัวเลื่อนด้วยตัวเลือก
วิธีการที่ระบุข้างต้นมีพารามิเตอร์ต่อไปนี้ -
swiperContainer- เป็นHTMLElement หรือสตริงของ swiper container และจำเป็น
parameters - เป็นองค์ประกอบเสริมที่มีวัตถุที่มีพารามิเตอร์ swiper
ตัวอย่างเช่น -
var mySwiper = app.swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});
เป็นไปได้ที่จะเข้าถึงอินสแตนซ์ของ swiper และคุณสมบัติswiperของคอนเทนเนอร์ของตัวเลื่อนมีองค์ประกอบ HTML ต่อไปนี้ -
var mySwiper = $$('.swiper-container')[0].swiper;
// Here you can use all slider methods like:
mySwiper.slideNext();
คุณสามารถดูวิธีและประเภทต่างๆของตัวปัดได้ในตารางต่อไปนี้ -
ส. เลขที่ | ประเภทและคำอธิบายของ Swiper |
---|---|
1 | Swiper เริ่มต้นพร้อมเลขหน้า เป็นแถบเลื่อนแบบสัมผัสที่ทันสมัยและตัวเลื่อนจะเลื่อนในแนวนอนโดยค่าเริ่มต้น |
2 | Swiper แนวตั้ง อันนี้ยังใช้เป็น swiper เริ่มต้น แต่จะปัดในแนวตั้ง |
3 | ด้วยช่องว่างระหว่างสไลด์ ตัวปัดนี้ใช้เพื่อให้มีช่องว่างระหว่างสองสไลด์ |
4 | Swipers หลายตัว เครื่องปัดน้ำฝนนี้ใช้ตัวเลื่อนมากกว่าหนึ่งตัวในหน้าเดียว |
5 | Swipers ที่ซ้อนกัน เป็นการผสมผสานระหว่างสไลด์แนวตั้งและแนวนอน |
6 | การควบคุมแบบกำหนดเอง ใช้สำหรับการควบคุมแบบกำหนดเองเพื่อเลือกหรือปัดสไลด์ใด ๆ |
7 | ขี้เกียจโหลด สามารถใช้สำหรับไฟล์มัลติมีเดียซึ่งต้องใช้เวลาในการโหลด |