Lory Carousel Slider คุณสมบัติ CSS Animation & Touch Support

ออกมาจากทั้งหมด ปลั๊กอินม้าหมุนออนไลน์ ฉันต้องทิปหมวกให้ ลอรี่. มันช่างเป็น แนวคิดที่เรียบง่าย แต่มันเป็นหนึ่งใน แถบเลื่อนที่ทรงพลังที่สุด บนเว็บ.

เวอร์ชันย่อ รวมประมาณ 7KB ซึ่งไม่เล็ก แต่ก็แน่นอน ไม่เลวสำหรับแถบเลื่อนแบบเปิดใช้งานด้วยการสัมผัส.

คุณสามารถเพิ่มปลั๊กอินนี้ลงในเว็บไซต์ใด ๆ ก็ได้ รันบน jQuery หรือธรรมดาวานิลลา JS. มันสามารถวิ่งได้ด้วย ไม่มีการพึ่งพา ซึ่งเหมาะสำหรับความเข้ากันได้.

ลอรี่เป็นหนึ่งในปลั๊กอินไม่กี่ตัวที่ ไม่ลดระดับลงในเบราว์เซอร์รุ่นเก่า. มัน สนับสนุนอย่างเต็มที่ใน IE10+, และเวอร์ชั่นที่เก่ากว่ายังคงสามารถเรียกใช้แถบเลื่อนได้ ไม่มีภาพเคลื่อนไหวและความพิเศษเล็กน้อย.

คุณจะต้อง ทำรหัสโปรแกรมทั้งหมดด้วยตัวคุณเอง ถ้าคุณต้องการเพิ่มเนื้อหา แต่เป็น เรียบง่ายอย่างน่าประหลาดใจ. คุณสามารถกำหนดขนาดที่จะทำให้แต่ละพาเนลได้นานเท่าไหร่ในการเคลื่อนไหวและวิธีจัดการเบราว์เซอร์ที่ตอบสนองได้.

ลองดูที่หน้าแรกของ Lory สำหรับ รหัสแหล่งที่มา และ รายละเอียดเกี่ยวกับการตั้งค่า.

เริ่มต้นด้วยการเพิ่มไลบรารี Lory JS ไปยังเว็บไซต์ของคุณ หัว มาตรา, ไม่ว่าจะเป็นปลั๊กอิน jQuery หรือไลบรารีวานิลลา ทุกรุ่นปัจจุบัน โฮสต์บน Cloudflare CDN, ดังนั้นจึงง่ายที่จะรวมสำเนาโดยไม่ต้องดาวน์โหลด.

เมื่อติดตั้งไฟล์ JavaScript คุณจะต้องสร้างรายการที่ไม่เรียงลำดับ HTML ด้วยเนื้อหาสไลด์ แต่ Lory มาพร้อมกับคลาสที่กำหนดไว้ล่วงหน้าไม่กี่ ดังนั้นจึงเป็นเรื่องดี ติดกับรูปแบบของพวกเขา.

นี่คือบางส่วน รหัสตัวอย่าง นำมาจาก repo Lory GitHub หลัก:

 
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
 
 

ตอนนี้ใน jQuery (หรือ JS ธรรมดา) คุณทำได้ ตั้งค่าการเรียกใช้ฟังก์ชัน. ควรมีลักษณะดังนี้:

 $ ('. js_slider'). lory (infinite: 1); 

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

ในขณะที่พัฒนาด้วยปลั๊กอินนี้คุณอาจมีคำถามที่กำหนดเองมากมาย ฉันขอแนะนำ เรียกดูเอกสาร ซึ่งอยู่ที่ด้านล่างสุดของหน้า GitHub.

อาจไม่ใช่ตำแหน่งที่ดีที่สุดสำหรับเอกสาร แต่โชคดีที่มันมีขนาดค่อนข้างเล็ก คุณมี ประมาณ 10 ตัวเลือก เพื่อปรับแต่งและอาจจะ 10-12 เหตุการณ์ที่แตกต่าง คุณสามารถคนจรจัดด้วย ข้อมูลนี้สามารถพบได้ที่ด้านล่างของเว็บไซต์ Lory แต่มันง่ายมากที่จะอ่านบน GitHub.

การอัปเดตนั้นไม่บ่อยนัก แต่คุณสามารถทำได้ตลอดเวลา ปากกาคำขอปัญหา บน GitHub ถ้าคุณประสบปัญหา หากคุณมีปัญหาเกี่ยวกับรหัสคุณอาจมีเวลาแก้ไขได้ง่ายขึ้นใน Stack Overflow.

ทั้งสองวิธีคุณสามารถ เริ่มต้นได้อย่างรวดเร็ว ใช้ Cloudflare CDN และเอกสาร GitHub และถ้าคุณกำลังมองหา การสาธิตสดพร้อมรหัส ตรวจสอบรายการ CodePen นี้.