แถบเลื่อนตอบสนองโดยใช้ jQuery ปลั๊กอิน jQuery ของตัวเลื่อนแบบปรับได้ “Product Colorizer”

4 พฤศจิกายน 2019 โพสต์ได้รับการปรับปรุงแล้ว

ยูริ เนเม็ตส์

เลื่อนเปิดอยู่ CSS บริสุทธิ์+ แถบเลื่อนโบนัส

แถบเลื่อน CSS มีข้อดีเหนือกว่าแถบเลื่อน Javascript บางประการ ข้อดีประการหนึ่งคือความเร็วในการโหลด ไม่เพียงแต่รูปภาพสำหรับแถบเลื่อนจะใช้ในขนาดใหญ่เท่านั้น (หากไม่มีการปรับให้เหมาะสมสำหรับหน้าจอต่างๆ) แต่ยังใช้เวลาในการโหลดสคริปต์อีกด้วย แต่ในบทความคุณจะเห็นเฉพาะแถบเลื่อนที่ใช้ CSS ล้วนๆ

นี่คือสิ่งที่ฉันพบบนเว็บไซต์เกี่ยวกับตัวเลื่อน:

1. แถบเลื่อนรูปภาพ CSS3

แถบเลื่อน CSS ที่ใช้ปุ่มตัวเลือกเพื่อนำทางสไลด์ ปุ่มตัวเลือกเหล่านี้อยู่ใต้แถบเลื่อน นอกจากนี้นอกเหนือจากปุ่มตัวเลือกแล้ว การนำทางยังดำเนินการโดยใช้ลูกศรทางซ้ายและขวา เพื่อติดตามว่าภาพใดที่แสดงอยู่ในปัจจุบัน จะใช้ :checked pseudo-classes

2. แถบเลื่อนรูปภาพ CSS3 พร้อมภาพขนาดย่อ

ต่างจากแถบเลื่อน CSS ก่อนหน้าตรงที่นี่แทนที่จะเป็นปุ่มตัวเลือกที่ด้านล่างจะมีภาพขนาดย่อของรูปภาพทั้งหมด ซึ่งสะดวกเมื่อสร้างแกลเลอรีรูปภาพ ภาพเปลี่ยนไปพร้อมกับเอฟเฟกต์ที่แปลกประหลาด: ภาพเหล่านั้นจะหายไปอย่างราบรื่นเมื่อขยายใหญ่

3. แกลเลอรีพร้อม CSS

แต่แถบเลื่อน CSS นี้เหมาะสำหรับหน้าการขาย ตามกฎแล้วเมื่อพัฒนาหน้า Landing Page (ขายหน้า) นักพัฒนาเว็บจำนวนมากวางแถบเลื่อนที่จุดเริ่มต้นเพื่อให้ผู้เยี่ยมชมเห็นประโยชน์ทั้งหมดที่มีในหน้านี้ในหน้าจอแรก (โดยไม่ต้องเลื่อน) ทันที นอกจากทุกอย่างแล้ว ตัวเลื่อนนี้ยังปรับได้ ซึ่งก็ดีเช่นกัน

4. แถบเลื่อน CSS ที่ไม่มีลิงก์

ฉันต้องการทราบทันทีว่าแถบเลื่อนนี้ไม่ได้ใช้ลิงก์! ตามค่าเริ่มต้น นอกเหนือจากรูปภาพหลัก (สไลด์) แล้ว ยังมองเห็นได้อีก 2 สไลด์ ตั้งอยู่ด้านหลังอาคารหลัก การเปลี่ยนสไลด์เกิดขึ้นในโหมดสวยงาม: ขั้นแรก สองสไลด์จะถูกย้ายออกจากกัน และสไลด์ที่จะกลายเป็นสไลด์หลักจะอยู่ตรงกลาง จากนั้นสไลด์จะถูกขยายและวางไว้ข้างหน้าสไลด์อื่นๆ

5. ตัวเลื่อน CSS3 ที่ตอบสนอง

แถบเลื่อนแบบปรับได้อีกอันซึ่งการควบคุมจะขึ้นอยู่กับปุ่มตัวเลือก เพื่อดูว่าแถบเลื่อนนี้จะมีลักษณะอย่างไร อุปกรณ์ที่แตกต่างกันอ่า - คุณสามารถเปลี่ยนหน้าต่างเบราว์เซอร์ได้ด้วยตัวเองหรือบนหน้าเว็บที่มีแถบเลื่อนจะมีไอคอนพิเศษสำหรับอุปกรณ์ต่าง ๆ โดยคลิกที่คุณจะเห็นว่าแถบเลื่อนจะมีลักษณะอย่างไรบนคอมพิวเตอร์ แท็บเล็ต หรือสมาร์ทโฟน

*** โบนัสสไลเดอร์ ***

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

บทสรุป

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

ประเด็นที่ถูกกล่าวถึงในบทความ

สวัสดีผู้อ่านบล็อกที่รัก วันนี้ผมขอนำเสนอสิ่งที่มีประโยชน์ให้กับคุณ ตัวเลือกแถบเลื่อน jQuery ฟรีพร้อมตัวอย่าง- หากคุณยังคงตัดสินใจที่จะใส่แถบเลื่อนรูปภาพบนทรัพยากรของคุณ การเลือกนี้จะมีประโยชน์มากสำหรับคุณ และเชื่อฉันเถอะ คุณมีตัวเลือกมากมาย นอกจากนี้ แถบเลื่อนทั้งหมดยังมีตัวอย่าง และคุณสามารถลองใช้แต่ละแถบได้จริง โดยทั่วไปแล้ว ฉันจะไม่กวนใจคุณ เลือกเลย :-)

แถบเลื่อนรูปภาพ jQuery อย่างง่าย

แถบเลื่อนภาพขนาดย่อที่ใช้บ่อยที่สุดบนไซต์ของคุณ

ตัวเลื่อนภาพขนาดย่อใน JQuery

แถบเลื่อนที่เรียบง่ายและน่าสนใจพร้อมภาพขนาดย่อที่เหมาะกับการออกแบบเกือบทุกรูปแบบ

แถบเลื่อนที่สวยงามสำหรับเว็บไซต์

แถบเลื่อนรูปภาพขนาดใหญ่และสวยงามมาก พร้อมการเลื่อนข้อความที่น่าสนใจ

แถบเลื่อน jQuery ปกติ

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

แถบเลื่อนขนาดใหญ่พร้อมคำอธิบาย

สไลเดอร์สุดตระการตาที่ไม่อาจผ่านไปได้

แถบเลื่อนรูปภาพ JQuery และคำอธิบาย

รอและเลื่อนข้อความอย่างมีสไตล์พร้อมรูปภาพและด้วย เอฟเฟกต์สวยงามพลิก

เลื่อนภาพพร้อมคำแนะนำ

การเลื่อนรูปภาพที่น่าสนใจที่เลื่อนได้อย่างต่อเนื่องและราบรื่น ตามค่าเริ่มต้นจะมีรูปภาพผลไม้ต่างๆ ซึ่งคุณสามารถเปลี่ยนเป็นภาพผลไม้ของคุณเองได้

แถบเลื่อน jQuery พร้อมลูกศรขนาดใหญ่

แถบเลื่อนที่น่าสนใจพร้อมลูกศรสีชมพูขนาดใหญ่ที่เปลี่ยนขนาดโดยการขยายภาพ

1. ปลั๊กอิน jQuery “ปูนเปียก”

แกลเลอรี jquery ที่ตอบสนอง (ปรับขนาดเมื่อความละเอียดหน้าจอเปลี่ยนแปลง) แสดงในหน้าต่างป๊อปอัปพร้อมภาพขนาดย่อและคำอธิบายภาพ แกลเลอรี Jquery “Fresco” ทำงานได้อย่างถูกต้องในเบราว์เซอร์ส่วนใหญ่ รวมถึง: IE6+, Firefox 3+, Chrome 5+, Opera 9+ ปลั๊กอินเวอร์ชันฟรีนี้สามารถใช้ได้กับโครงการที่ไม่ใช่เชิงพาณิชย์เท่านั้น

2. แถบเลื่อน “อะแดปเตอร์”

แถบเลื่อนพร้อมเอฟเฟกต์การเปลี่ยนแปลงต่างๆ (เอฟเฟกต์ 7 แบบ รวมถึง 3D) โครงการบน Github

3. ปลั๊กอินตัวเลื่อนพร้อมเอฟเฟกต์ต่าง ๆ “jQ-Tiles”

ปลั๊กอินที่มีเอฟเฟ็กต์การเปลี่ยนแปลงต่างๆ ความเร็วสไลด์ที่ปรับแต่งได้ และฟังก์ชันการเลื่อนอัตโนมัติ

4. ปลั๊กอิน jQuery “เจ้าเล่ห์”

ปลั๊กอินสำหรับใช้งาน scroller แนวตั้งและแนวนอน โครงการบน Github

5. เมนู CSS3 “Makisu” แบบเคลื่อนไหว

6. สไลด์โชว์อย่างง่าย

7. ตัวเลื่อน jQuery ที่ใช้งานได้ “iView Slider v2.0”

แถบเลื่อนเนื้อหา/สไลด์โชว์ (สไลด์ไม่เพียงแต่มีรูปภาพเท่านั้น แต่ยังมีคลิปวิดีโอและอื่นๆ อีกมากมาย เนื้อหา HTML- สำหรับการนำทาง คุณสามารถใช้: รูปขนาดย่อ, ปุ่มซ้าย/ขวา และการใช้แป้นพิมพ์ โครงการบน Github.com

8. ชุดปลั๊กอิน jQuery “Vanity”

ชุดประกอบด้วยปลั๊กอิน 7 ตัว: jSlider, jTabs, jPaginate, jSpotlight, jTip, jPlaceholder และ jCollapse ชุดโซลูชันเหล่านี้จะช่วยให้คุณใช้งานแถบเลื่อน คำแนะนำเครื่องมือ แท็บ คำอธิบายรูปภาพป๊อปอัป ฯลฯ

9. เอฟเฟกต์โฮเวอร์ CSS3

10. เมนูแบบเลื่อนลง CSS3

11. แถบเลื่อน iOS

สไลเดอร์ที่ออกแบบมาเพื่อการทำงานโดยเฉพาะ อุปกรณ์เคลื่อนที่.

12. ตัวบ่งชี้การโหลด CSS3

13. เอฟเฟกต์โฮเวอร์ CSS3

14. ปลั๊กอิน jQuery “Product Colorizer”

ปลั๊กอินเป็นวิธีแก้ปัญหาง่ายๆ สำหรับการดูผลิตภัณฑ์ในตัวเลือกสีต่างๆ (ที่เกี่ยวข้อง เช่น สำหรับร้านขายเสื้อผ้าออนไลน์ที่ให้ผู้เยี่ยมชมเลือกโทนสีของผลิตภัณฑ์จากหลายตัวเลือก) เพื่อให้ปลั๊กอินทำงานได้ คุณต้องมีรูปภาพเพียงสองภาพสำหรับแต่ละผลิตภัณฑ์ (สีทั้งหมดจะถูกซ้อนทับเป็นมาส์ก) ปลั๊กอินใช้งานได้กับเบราว์เซอร์หลักๆ ทั้งหมด รวมถึง IE7+ (จะใช้งานได้ใน IE6 ด้วย หากคุณแก้ไขการแสดงภาพโปร่งใส PNG) โครงการบน GitHub

15. แผนภูมิภาพเคลื่อนไหว CSS3

16. สร้างเอฟเฟกต์ภาพซ้อนทับเมื่อคลิกที่ภาพ

เมื่อคุณคลิกที่รูปภาพ รูปภาพจะมืดลงและเข้าสู่พื้นหลัง และรายการที่มีคำบรรยายจะปรากฏขึ้น ด้วยวิธีนี้คุณสามารถให้ได้ คำอธิบายสั้น ๆองค์ประกอบที่อยู่ในภาพ

17. การนำทางหน้าเป็นเมนูแบบเลื่อนลง

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

18. แกลเลอรี CSS3 พร้อมเอฟเฟกต์โฮเวอร์

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

19. ตัวเลื่อน jQuery พร้อมเอฟเฟกต์ Parallax

20. ภาพเคลื่อนไหว CSS3 เมื่อวางเมาส์เหนือบล็อก

21. แผงป๊อปอัป CSS3 jQuery

คลิกที่ลูกศรที่ด้านล่างของหน้าจอในหน้าสาธิตเพื่อดูไอคอนป๊อปอัป

22. แกลเลอรี่ภาพ HTML5 ฟรี “Juicebox Lite”

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

23. ปลั๊กอิน “JQVMap”

24. แถบเลื่อน CSS3 พร้อมเอฟเฟกต์ Parallax

25. แกลเลอรี่ภาพ jQuery พร้อมภาพขนาดย่อ

ขนาดแกลเลอรี รูปภาพ และภาพขนาดย่อที่ตอบสนองจะเปลี่ยนไปตามขนาดของหน้าต่างเบราว์เซอร์

26. ปลั๊กอินตัวเลื่อนเนื้อหา jQuery “Horinaja”

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

27. ปลั๊กอินตัวเลื่อน jQuery “Pikachoose”

ในสามรูปแบบ: การใช้งานการเปลี่ยนแปลงรูปภาพอย่างง่าย ๆ โดยไม่มีคำอธิบายและภาพขนาดย่อ แถบเลื่อนพร้อมคำบรรยายภาพและภาพขนาดย่อ แถบเลื่อนพร้อมภาพขนาดย่อและเพิ่มการเปิดภาพขนาดใหญ่ในหน้าต่างป๊อปอัปพร้อมเอฟเฟกต์ FancyBox เวอร์ชันล่าสุดสามารถพบได้บน Github

28. สไตล์ CSS แบบกำหนดเองหลายรายการสำหรับรายการแบบเลื่อนลง

ห้าสไตล์รายการแบบเลื่อนลงที่แตกต่างกันโดยใช้เทคนิค CSS ที่แตกต่างกัน

29. เมนูร้านอาหารพร้อมเอฟเฟกต์ 3 มิติแบบเคลื่อนไหว

การนำเสนอข้อมูล CSS jQuery ที่น่าสนใจบนหน้า เมื่อคลิกที่ลิงก์ หนังสือเมนูจะเปิดขึ้น และผู้เยี่ยมชมสามารถอ่านเพิ่มเติมเกี่ยวกับอาหารที่จัดให้ได้ในหน้าต่างป๊อปอัป ภาพเคลื่อนไหวแสดงไม่ถูกต้องใน IE

30. ปลั๊กอิน “Elastislide”

การใช้งานวงล้อปรับยาง (วงล้อภาพแนวตั้งและแนวนอน) และแกลเลอรี่ภาพ เมื่อคุณทำให้หน้าต่างเบราว์เซอร์ของคุณเล็กลง จำนวนภาพจะลดลงตามจำนวนที่กำหนด ค่าต่ำสุดจากนั้นขนาดของภาพที่เหลือจะถูกปรับขนาด โครงการบน Github

31. ตัวเลื่อน CSS3 jQuery ใหม่ “Slit Slider”

ปลั๊กอินตัวเลื่อนแบบปรับได้ (สามารถตั้งค่าความกว้างเป็นเปอร์เซ็นต์และจะปรับขนาดอัตโนมัติ) ในสองสไตล์พร้อมเอฟเฟกต์ภาพเคลื่อนไหวที่น่าสนใจเมื่อเปลี่ยนสไลด์ (สไลด์ถูกตัดครึ่งหนึ่งและเคลื่อนที่ไปในทิศทางที่ต่างกัน และแบบใหม่จะเข้ามาแทนที่ ). สามารถนำทางโดยใช้แป้นพิมพ์ได้ เวอร์ชันล่าสุดบน Github เสมอ

32. เวอร์ชันใหม่ของแถบเลื่อนรูปภาพ 3 มิติ “Slicebox”

เวอร์ชั่นใหม่เมื่อมีการเปลี่ยนแปลงและเพิ่มฟังก์ชันใหม่: ขณะนี้แถบเลื่อน 3D สามารถปรับขนาดได้ คุณจะเห็นสิ่งนี้ได้เมื่อคุณลดขนาดหน้าต่างเบราว์เซอร์ เพิ่มการรองรับ Firefox; ในคำอธิบายสไลด์ คุณสามารถใช้เนื้อหา HTML ได้แล้ว (ก่อนหน้านี้คำอธิบายถูกดึงมาจากแอตทริบิวต์ลิงก์โดยไม่สามารถใช้งานได้ แท็ก HTML- ในหน้าสาธิต คุณจะเห็น 4 ตัวเลือกสำหรับการใช้ปลั๊กอิน เวอร์ชันล่าสุดอาศัยอยู่บน Github.com

เอฟเฟ็กต์จะคล้ายกับแกลเลอรี Flash 3D CU3ER มาก (สาธิต ดาวน์โหลด) มีเพียงแถบเลื่อน 3D นี้เท่านั้นที่ไม่ได้ใช้ เทคโนโลยีแฟลชและใช้จาวาสคริปต์

33. ปลั๊กอิน jQuery “PFold”

วิธีแก้ปัญหาการทดลอง ปลั๊กอินใช้เอฟเฟกต์ 3 มิติเพื่อจำลองการกางโน้ต ตัวเลือกการออกแบบที่หลากหลาย: มีสามสเปรด โดยมีสองสเปรด และสเปรดโดยมีตรงกลางของโน้ตที่กางออก

34. ปลั๊กอิน jQuery “ลมแรง”

ปลั๊กอินสำหรับการนำทางผ่านเนื้อหา เช่น รูปภาพ เมื่อคุณเลื่อนดูรูปภาพ พวกมันจะแยกออกจากกันในทิศทางที่ต่างกัน (เอฟเฟกต์ค่อนข้างชวนให้นึกถึงการแจกไพ่ในเกมไพ่โป๊กเกอร์) ในการนำทาง คุณสามารถใช้ปุ่มซ้าย/ขวาหรือแถบเลื่อนได้ (ดูตัวเลือกต่างๆ ในหน้าสาธิต) โครงการบน

ในปัจจุบัน ตัวเลื่อน - แบบหมุน - เป็นฟังก์ชันที่จำเป็นต้องมีบนเว็บไซต์ธุรกิจ เว็บไซต์พอร์ตโฟลิโอ หรือแหล่งข้อมูลอื่นใด นอกจากตัวเลื่อนรูปภาพแบบเต็มหน้าจอแล้ว ตัวเลื่อนแบบหมุนแนวนอนยังเข้ากันได้ดีกับการออกแบบเว็บไซต์ทุกแบบ

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

การใช้ JQuery ร่วมกับ HTML5 และ CSS3 คุณสามารถทำให้เพจของคุณน่าสนใจยิ่งขึ้น มอบเอฟเฟกต์ที่เป็นเอกลักษณ์ และดึงดูดความสนใจของผู้เยี่ยมชมไปยังพื้นที่เฉพาะของไซต์

Slick – ปลั๊กอินตัวเลื่อนแบบหมุนที่ทันสมัย

Slick เป็นปลั๊กอิน jquery ที่ใช้งานได้ฟรีซึ่งนักพัฒนาอ้างว่าโซลูชันของพวกเขาจะตอบสนองความต้องการตัวเลื่อนทั้งหมดของคุณ ตัวเลื่อนแบบปรับได้ - ม้าหมุนสามารถทำงานในโหมด "ไทล์" สำหรับอุปกรณ์มือถือ และในโหมด "ลากและวาง" สำหรับเวอร์ชันเดสก์ท็อป

ประกอบด้วยเอฟเฟกต์การเปลี่ยนแปลงแบบ "จาง" คุณสมบัติ "โหมดกึ่งกลาง" ที่น่าสนใจ การโหลดรูปภาพแบบ Lazy Loading พร้อมการเลื่อนอัตโนมัติ ฟังก์ชันการทำงานที่อัปเดตประกอบด้วยการเพิ่มสไลด์และตัวกรองสไลด์ ทั้งหมดเพื่อให้แน่ใจว่าคุณกำหนดค่าปลั๊กอินตามความต้องการของคุณ

โหมดสาธิต | ดาวน์โหลด

Owl Carousel 2.0 – jQuery – ปลั๊กอินสำหรับใช้กับอุปกรณ์ระบบสัมผัส

ปลั๊กอินนี้มีคุณสมบัติดังต่อไปนี้: ชุดใหญ่คุณสมบัติที่เหมาะสำหรับทั้งผู้เริ่มต้นและนักพัฒนาที่มีประสบการณ์ นี้ เวอร์ชันอัปเดตสไลเดอร์ - ม้าหมุน บรรพบุรุษของเขามีชื่อเดียวกัน

แถบเลื่อนมีปลั๊กอินในตัวเพื่อปรับปรุงฟังก์ชันการทำงานโดยรวม แอนิเมชั่น, การเล่นวิดีโอ, การเล่นอัตโนมัติของตัวเลื่อน, การโหลดแบบ Lazy Loading, การปรับความสูงอัตโนมัติ - ​​นี่คือคุณสมบัติหลักของ Owl Carousel 2.0

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

ตัวอย่าง | ดาวน์โหลด

ปลั๊กอิน jQuery Silver Track

ปลั๊กอิน jquery ที่ค่อนข้างเล็ก แต่มีฟังก์ชันครบครันที่ให้คุณวางแถบเลื่อนบนหน้าเว็บได้ - แบบหมุนซึ่งมีแกนขนาดเล็กและไม่ใช้ทรัพยากรของไซต์มากนัก ปลั๊กอินสามารถใช้เพื่อแสดงแถบเลื่อนแนวตั้งและแนวนอน พร้อมภาพเคลื่อนไหวและสร้างชุดรูปภาพจากแกลเลอรี

ตัวอย่าง | ดาวน์โหลด

AnoSlide – ตัวเลื่อน jQuery ที่ตอบสนองขนาดกะทัดรัดเป็นพิเศษ

กะทัดรัดเป็นพิเศษ แถบเลื่อน jQuery– ม้าหมุน ซึ่งมีฟังก์ชันการทำงานที่มากกว่าแถบเลื่อนทั่วไปมาก มันรวมถึง ดูตัวอย่างรูปภาพหนึ่งภาพ ซึ่งแสดงหลายภาพในรูปแบบของภาพหมุนและแถบเลื่อนตามชื่อเรื่อง

ตัวอย่าง | ดาวน์โหลด

Owl Carousel – ตัวเลื่อน Jquery – ม้าหมุน

ม้าหมุนนกฮูก – สไลเดอร์พร้อมตัวรองรับ หน้าจอสัมผัสและเทคโนโลยีการลากและวาง ซึ่งรวมเข้ากับโค้ด HTML ได้อย่างง่ายดาย ปลั๊กอินเป็นหนึ่งในแถบเลื่อนที่ดีที่สุดที่ช่วยให้คุณสามารถสร้างภาพหมุนที่สวยงามได้โดยไม่ต้องมีมาร์กอัปที่เตรียมไว้เป็นพิเศษ

ตัวอย่าง | ดาวน์โหลด

แกลเลอรี่ 3 มิติ - ม้าหมุน

ใช้การเปลี่ยนภาพ 3 มิติตามสไตล์ CSS และโค้ด Javascript เล็กน้อย

ตัวอย่าง | ดาวน์โหลด

ม้าหมุน 3 มิติโดยใช้ TweenMax.js และ jQuery

ม้าหมุน 3 มิติอันงดงาม ดูเหมือนว่านี่ยังเป็นเวอร์ชันเบต้าอยู่ เนื่องจากฉันพบปัญหาบางประการเกี่ยวกับเวอร์ชันนี้ในขณะนี้ หากคุณสนใจที่จะทดสอบและสร้างแถบเลื่อนของคุณเอง ภาพหมุนนี้จะช่วยคุณได้มาก

ตัวอย่าง | ดาวน์โหลด

ม้าหมุนโดยใช้ bootstrap

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

ตัวอย่าง | ดาวน์โหลด

ตัวเลื่อนแบบหมุนกล่องการเคลื่อนย้ายตามกรอบ Bootstrap

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

ตัวอย่าง | ดาวน์โหลด

ตัวเลื่อนวงกลมจิ๋ว

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

ในโหมดวงกลม แถบเลื่อนดูน่าสนใจทีเดียว การสนับสนุนที่ยอดเยี่ยมสำหรับวิธีการลากและวางและระบบเลื่อนสไลด์อัตโนมัติ

ตัวอย่าง | ดาวน์โหลด

ตัวเลื่อนเนื้อหา Thumbelina

แถบเลื่อนแบบหมุนที่ทรงพลังและปรับเปลี่ยนได้เหมาะสำหรับเว็บไซต์สมัยใหม่ ทำงานอย่างถูกต้องบนอุปกรณ์ใด ๆ มีโหมดแนวนอนและแนวตั้ง ขนาดของมันย่อเล็กสุดเหลือเพียง 1 KB ปลั๊กอินขนาดกะทัดรัดพิเศษยังมีการเปลี่ยนผ่านที่ราบรื่นเป็นเลิศอีกด้วย

ตัวอย่าง | ดาวน์โหลด

ว้าว - สไลเดอร์ - ม้าหมุน

มีเอฟเฟกต์มากกว่า 50 รายการซึ่งสามารถช่วยคุณสร้างแถบเลื่อนดั้งเดิมสำหรับเว็บไซต์ของคุณ

ตัวอย่าง | ดาวน์โหลด

ตัวเลื่อนเนื้อหา jQuery ที่ตอบสนอง bxSlider

ปรับขนาดหน้าต่างเบราว์เซอร์ของคุณเพื่อดูว่าแถบเลื่อนจะปรับเปลี่ยนอย่างไร Bxslider มาพร้อมกับตัวเลือกการปรับแต่งมากกว่า 50 แบบ และแสดงคุณสมบัติพร้อมเอฟเฟกต์การเปลี่ยนแปลงต่างๆ

ตัวอย่าง | ดาวน์โหลด

jCarousel

jCarousel เป็นปลั๊กอิน jQuery ที่จะช่วยจัดระเบียบการดูภาพของคุณ คุณสามารถสร้างภาพหมุนแบบกำหนดเองได้อย่างง่ายดายจากฐานที่แสดงในตัวอย่าง แถบเลื่อนสามารถปรับได้และปรับให้เหมาะสมสำหรับการทำงานบนแพลตฟอร์มมือถือ

ตัวอย่าง | ดาวน์โหลด

Scrollbox - ปลั๊กอิน jQuery

Scrollbox เป็นปลั๊กอินขนาดกะทัดรัดสำหรับสร้างแถบเลื่อน - แบบหมุนหรือการรวบรวมข้อมูลข้อความ คุณสมบัติที่สำคัญ ได้แก่ เอฟเฟกต์การเลื่อนแนวตั้งและแนวนอนพร้อมการหยุดชั่วคราวเมื่อวางเมาส์ไว้เหนือ

ตัวอย่าง | ดาวน์โหลด

dbpasCarousel

แถบเลื่อนแบบหมุนที่เรียบง่าย หากคุณต้องการปลั๊กอินที่รวดเร็ว ปลั๊กอินนี้เหมาะสม 100% มาพร้อมกับคุณสมบัติพื้นฐานที่จำเป็นสำหรับแถบเลื่อนในการทำงาน

ตัวอย่าง | ดาวน์โหลด

Flexisel: ปลั๊กอิน JQuery Slider ที่ตอบสนอง - ม้าหมุน

ผู้สร้าง Flexisel ได้รับแรงบันดาลใจจากปลั๊กอิน jCarousel รุ่นเก่า โดยทำสำเนาของปลั๊กอินนี้โดยมุ่งเป้าไปที่ การดำเนินการที่ถูกต้องแถบเลื่อนบนอุปกรณ์มือถือและแท็บเล็ต

รูปแบบที่ตอบสนองของ Flexisel เมื่อทำงานบนอุปกรณ์เคลื่อนที่จะแตกต่างจากรูปแบบขนาดหน้าต่างเบราว์เซอร์ Flexisel ได้รับการปรับให้เข้ากับการทำงานบนหน้าจอทั้งความละเอียดต่ำและสูงได้อย่างสมบูรณ์แบบ

ตัวอย่าง | ดาวน์โหลด

Elastislide – ตัวเลื่อนแบบปรับได้ – แบบหมุน

Elastislide ปรับให้เข้ากับขนาดหน้าจออุปกรณ์ของคุณได้อย่างสมบูรณ์แบบ คุณสามารถกำหนดจำนวนภาพขั้นต่ำที่จะแสดงที่ความละเอียดเฉพาะได้ ทำงานได้ดีเป็นแถบเลื่อนแบบหมุนพร้อมแกลเลอรีรูปภาพ โดยใช้ wrapper แบบตายตัวพร้อมกับเอฟเฟกต์การเลื่อนแนวตั้ง

ตัวอย่าง | ดาวน์โหลด

เฟล็กซ์สไลเดอร์ 2

ตัวเลื่อนฟรีแวร์จาก Woothemes ถือว่าเป็นหนึ่งในสิ่งที่ดีที่สุด แถบเลื่อนแบบปรับได้- ปลั๊กอินประกอบด้วยเทมเพลตหลายแบบและจะมีประโยชน์สำหรับทั้งผู้ใช้มือใหม่และผู้เชี่ยวชาญ

ตัวอย่าง | ดาวน์โหลด

ม้าหมุนที่น่าทึ่ง

Amazing Carousel – ตัวเลื่อนรูปภาพตอบสนองโดยใช้ jQuery รองรับระบบการจัดการเนื้อหามากมาย เช่น WordPress, Drupal และ Joomla ยังรองรับระบบปฏิบัติการ Android และ IOS และเดสก์ท็อปโดยไม่มีปัญหาความเข้ากันได้ เทมเพลตแบบหมุนที่น่าทึ่งในตัวช่วยให้คุณใช้แถบเลื่อนในโหมดแนวตั้ง แนวนอน และวงกลมได้

ตัวอย่าง | ดาวน์โหลด