นี่คือแถบเลื่อนแบบสัมผัสที่ตอบสนองซึ่งเขียนด้วย jQuery กลไกของปลั๊กอินนี้ใช้ภาพเคลื่อนไหว CSS3 แต่ในขณะเดียวกันก็ให้ทางเลือกสำรองสำหรับเบราว์เซอร์เวอร์ชันเก่า Glide.js นั้นเรียบง่ายและมีน้ำหนักเบา

การพึ่งพาเพียงอย่างเดียวของปลั๊กอินคือ jQuery ซึ่งเราต้องรวมไว้ก่อน:

มาเชื่อมต่อสไตล์พื้นฐานกัน

มาสร้างโครงสร้าง html ของแถบเลื่อนกัน

เปิดตัวแถบเลื่อนด้วยการตั้งค่าเริ่มต้น...

$(".slider").glide();

...หรือปรับแต่งเพื่อตัวคุณเอง

$(".slider").glide(( เล่นอัตโนมัติ: 5000, ลูกศร: "body", nav: "body" ));

รายการพารามิเตอร์ที่ใช้ได้:

หากต้องการใช้ API ให้เขียน glide ไปยังตัวแปร

Var glide = $(".slider").glide().data("api_glide");

วิธี API พร้อมใช้งานสำหรับคุณแล้ว

Glide.jump(3, console.log("วู้!"));

• .current() - กลับหมายเลขด้านปัจจุบัน
• .play() - เริ่มการเลื่อนอัตโนมัติ
• .pause() - หยุดการเลื่อนอัตโนมัติ
• .next(callback) - เลื่อนแถบเลื่อนไปข้างหน้า
• .prev(callback) - เลื่อนแถบเลื่อนกลับ
• .jump(ระยะทาง, โทรกลับ) - สลับไปยังสไลด์ที่ต้องการ
• .nav(target) - แนบการนำทางไปยังองค์ประกอบเฉพาะ (เช่น: "body", ".class", "#id")
• .arrows(target) - แนบลูกศรเข้ากับองค์ประกอบเฉพาะ (เช่น "body", ".class", "#id")

เราจำเป็นต้องเพิ่มปุ่มไปข้างหน้าและย้อนกลับ

ในการดำเนินการนี้ คุณจะต้องเสริมโค้ดที่เขียนไว้ก่อนหน้านี้

โครงสร้างตัวเลื่อนทั้งหมดจะยังคงเหมือนเดิม จะมีการเพิ่มสองคอนเทนเนอร์ลงในมาร์กอัปซึ่งจะทำหน้าที่เป็นปุ่ม

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

Slider-box( ตำแหน่ง : สัมพันธ์ ; ความกว้าง : 320px ; ความสูง : 210px ; ล้น : ซ่อน ; ) .slider( ตำแหน่ง : ญาติ ; ความกว้าง : 10,000px ; ความสูง : 210px ; ) .slider img( float : left ; ) .slider-box .prev , .slider-box .next( ตำแหน่ง : Absolute ; top : 100px ; display : block ; width : 29px ; height : 29px ; cursor : pointer ; ) .slider-box .prev( left : 10px ; background : url ( ../images/slider_controls.png ) ไม่ทำซ้ำ 0 0 ) .slider-box .next( right : 10px ; พื้นหลัง : url (../images/slider_controls.png ) ไม่ทำซ้ำ -29px 0 ; )

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

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

ผลลัพธ์ที่ได้คือแถบเลื่อนพร้อมปุ่มเดินหน้าและถอยหลัง

เราต้องการแถบเลื่อนธรรมดาพร้อมการเลื่อนอัตโนมัติ มาเริ่มกันเลย...

สไลด์จะเรียงกันเป็นแถวๆ เวลาที่แน่นอนจะเลื่อน

กรอบสีแดงแสดงส่วนที่มองเห็นได้ของแถบเลื่อน

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

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

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

Container.slider-box ระบุขนาดของแถบเลื่อน การใช้คุณสมบัติ overflow:hidden องค์ประกอบทั้งหมดที่ไม่รวมอยู่ในพื้นที่ภายในองค์ประกอบจะถูกซ่อนไว้

Container.slider ถูกตั้งค่าให้มีความกว้างมาก นี่เป็นสิ่งจำเป็นเพื่อให้สไลด์ทั้งหมดพอดีกับเส้น

สไลด์จะถูกจัดแนวโดยใช้คุณสมบัติ float:left

ด้านล่างนี้เป็นแผนผังของบล็อกตัวเลื่อน

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

ฟังก์ชั่นแอนิเมชั่น() ( var margin = parseInt($(".slider" ) .css ("marginLeft" ) ) ; // บล็อกปัจจุบัน offset.slider width= $(".slider-box" ) .width () , / / Slider width. slidersAmount= $(".slider" ) .children ().length ; // จำนวนสไลด์ในตัวเลื่อน if (margin!= (- width* (slidersAmount- 1 ) ) // ถ้าปัจจุบัน สไลด์ไม่ใช่อันสุดท้าย , ( Margin= Margin- width; // จากนั้นค่า Margin จะลดลงตามความกว้างของสไลด์ ) else ( // หากแสดงสไลด์สุดท้าย $(".slider" ) css ("margin-left" , - width) ; // จากนั้น block.slider จะกลับสู่ตำแหน่งเดิม, margin=- width* 2 ; ) $(".slider" ) .animate (( marginLeft: margin) , 1000 ) ; // Block.slider ถูกเลื่อนไปทางซ้าย 1 สไลด์ ;

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

1. ตัวเลื่อนโพสต์แนวนอนที่ตอบสนอง ม้าหมุนแนวนอนแบบปรับได้ด้วยคำแนะนำโดยละเอียด

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

2. ตัวเลื่อนบน Glide.js แถบเลื่อนนี้เหมาะสำหรับทุกเว็บไซต์ มันใช้ Glide.js กับโอเพ่นซอร์ส

- สีของแถบเลื่อนสามารถเปลี่ยนแปลงได้อย่างง่ายดาย

3. สไลด์โชว์เนื้อหาแบบเอียง

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

4. ตัวเลื่อนโดยใช้ผ้าใบ HTML5

แถบเลื่อนที่สวยงามและน่าประทับใจพร้อมอนุภาคแบบโต้ตอบ มันถูกสร้างขึ้นโดยใช้ผ้าใบ HTML5

5. ตัวเลื่อนการเปลี่ยนภาพ ตัวเลื่อนพร้อมเอฟเฟกต์ morphing (การแปลงที่ราบรื่นจากวัตถุหนึ่งไปอีกวัตถุหนึ่ง) ในในตัวอย่างนี้

แถบเลื่อนนี้เหมาะอย่างยิ่งสำหรับพอร์ตโฟลิโอของนักพัฒนาเว็บหรือสตูดิโอเว็บในรูปแบบของพอร์ตโฟลิโอ

แถบเลื่อนในรูปแบบของวงกลมพร้อมเอฟเฟกต์การพลิกภาพ

7. ตัวเลื่อนที่มีพื้นหลังเบลอ

แถบเลื่อนแบบปรับได้พร้อมการสลับและการเบลอพื้นหลัง

8. แถบเลื่อนแฟชั่นที่ตอบสนอง

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

9. Slicebox - ตัวเลื่อนรูปภาพ jQuery 3D (อัปเดต)

เวอร์ชันอัปเดตของแถบเลื่อน Slicebox พร้อมการแก้ไขและฟีเจอร์ใหม่

10. ตารางรูปภาพตอบสนองแบบเคลื่อนไหวฟรี

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

11.แถบเลื่อนแบบยืดหยุ่น

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

12. กรอบรูป

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

ป.ล. ฉันติดตั้งตัวเลื่อนหลายครั้งและฉันคิดว่ามันเป็นตัวเลื่อนที่ดีที่สุดตัวหนึ่ง

13. แกลเลอรีตัวเลื่อน 3D ฟรีและปรับเปลี่ยนได้พร้อมภาพขนาดย่อ

แถบเลื่อนแกลเลอรีทดลอง 3DPanelLayout พร้อมตารางและ เอฟเฟกต์ที่น่าสนใจแอนิเมชั่น

14. ตัวเลื่อนบน css3

แถบเลื่อนแบบปรับได้นั้นสร้างโดยใช้ CSS3 พร้อมรูปลักษณ์ที่ราบรื่นของเนื้อหาและแอนิเมชั่นแบบเบา

15. ว้าวสไลเดอร์

WOW Slider เป็นตัวเลื่อนรูปภาพพร้อมเอฟเฟกต์ภาพที่น่าทึ่ง

17. ยางยืด

แถบเลื่อนแบบยืดหยุ่นพร้อมการตอบสนองเต็มรูปแบบและภาพขนาดย่อของสไลด์

18.กรีด

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

19. แกลลอรี่รูปภาพแบบปรับตัวบวก

แถบเลื่อนแกลเลอรีฟรีที่เรียบง่ายพร้อมการโหลดรูปภาพ

20. ตัวเลื่อนที่ตอบสนองสำหรับ WordPress

แถบเลื่อนฟรีแบบปรับได้สำหรับ WP

21. ตัวเลื่อนเนื้อหาพารัลแลกซ์

ตัวเลื่อนพร้อมเอฟเฟกต์พารัลแลกซ์และการควบคุมแต่ละองค์ประกอบโดยใช้ CSS3

22. สไลเดอร์พร้อมลิงค์เพลง

แถบเลื่อนโดยใช้เปิด ซอร์สโค้ดเจเพลเยอร์ แถบเลื่อนนี้มีลักษณะคล้ายกับการนำเสนอพร้อมดนตรี

23. ตัวเลื่อนด้วย jmpress.js

แถบเลื่อนแบบตอบสนองนั้นอิงตาม jmpress.js และจะช่วยให้คุณสามารถเพิ่มเอฟเฟกต์ 3D ที่น่าสนใจให้กับสไลด์ของคุณได้

24. สไลด์โชว์แบบโฮเวอร์อย่างรวดเร็ว

สไลด์โชว์ด้วย การสลับอย่างรวดเร็วสไลด์ สวิตช์สไลด์เมื่อโฮเวอร์

25. รูปภาพหีบเพลงด้วย CSS3

ภาพหีบเพลงโดยใช้ CSS3

26. ปลั๊กอินแกลเลอรีที่ปรับให้เหมาะสมแบบสัมผัส

นี่คือแกลเลอรีแบบตอบสนองที่ได้รับการปรับให้เหมาะกับอุปกรณ์ระบบสัมผัส

27. แกลเลอรี 3 มิติ

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

28. ตัวเลื่อนพร้อมการแบ่งหน้า

แถบเลื่อนตอบสนองพร้อมการแบ่งหน้าโดยใช้แถบเลื่อน JQuery UI แนวคิดคือการใช้แนวคิดการนำทางแบบง่ายๆ สามารถกรอกลับรูปภาพทั้งหมดหรือสลับแบบสไลด์ต่อสไลด์ได้

29.การตัดต่อภาพด้วย jQuery

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

30. แกลเลอรี่ 3 มิติ

แถบเลื่อนวงกลม 3 มิติอย่างง่ายโดยใช้ css3 และ jQuery

31. โหมดเต็มหน้าจอด้วยเอฟเฟกต์ 3D โดยใช้ css3 และ jQuery

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

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

ดูแถบเลื่อน jQuery 20 ตัวจาก Envato Market แล้วคุณจะรู้ว่ามีแถบเลื่อนที่เป็นมากกว่าบล็อกรูปภาพที่ไหลผ่านพวกมันอย่างราบรื่น

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

คุณสมบัติที่น่าสนใจหลายประการ:

จะสร้างเว็บไซต์ด้วยตัวเองได้อย่างไร?

การเพิ่มประสิทธิภาพ SEO

ปรับแต่งได้สูง

เทมเพลตเริ่มต้นมากกว่า 10 แบบ

มีทางเลือกสำรองสำหรับการเปลี่ยน CSS3

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

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

รายการคุณสมบัติตัวเลื่อนมีขนาดใหญ่มาก ดังนั้นฉันจะแสดงรายการเฉพาะสิ่งที่ดีที่สุดเท่านั้น:

เอฟเฟกต์พารัลแลกซ์และแอนิเมชั่นแบบกำหนดเอง

ไม่จำกัดจำนวนเลเยอร์และสไลด์พร้อมลิงก์

พร้อมใช้งาน ปรับแต่งสไตล์ได้ล้ำลึก

และอีกมากมาย

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

ชื่อ “ปลั๊กอินตัวเลื่อน jQuery แบบปรับตัว LayerSlider” ไม่สามารถประเมินตัวเลื่อนนี้ได้อย่างแท้จริง
การเปลี่ยนภาพ 2D และ 3D มากกว่า 200+ ภาพระหว่างสไลด์จะทำให้ทุกคนหันเหความสนใจ

คุณสมบัติเด่นสองสามประการ:

13 สกินและ 3 ประเภทเมนู

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

และทางเลือก jQuery

และอีกมากมาย

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

jQuery Banner Rotator / Slideshow เป็นตัวเลื่อนที่ค่อนข้างเรียบง่ายซึ่งไม่กระทบต่อฟังก์ชันหลัก

ความเป็นไปได้:

คำแนะนำเครื่องมือ การแทรกข้อความ ฯลฯ

การแสดงตัวอย่างและตัวเลือกต่างๆ สำหรับการดูส่วนประกอบ

จับเวลาด้วยการหน่วงเวลาสำหรับหนึ่งแถบเลื่อนหรือทั้งหมด

การเปลี่ยนหลายครั้งสำหรับสไลด์ทั้งหมดหรือการเปลี่ยนที่แตกต่างกันสำหรับแต่ละสไลด์

jQuery Banner Rotator / Slideshow เมื่อเปรียบเทียบกับแถบเลื่อน JQuery อื่น ๆ มีความสามารถพื้นฐานเท่านั้น แต่คุณไม่ควรลืมมัน

แถบเลื่อนใด ๆ ที่ปรากฏบนเว็บมีวิสัยทัศน์ที่เป็นเอกลักษณ์ของตัวเองและแก้ไขปัญหาบางอย่างในสาขานั้นได้ แต่ไม่ใช่อันนี้ All In One Slider สามารถเรียกได้ว่าเป็น "รวมทุกอย่าง"

ฉันคิดว่านักพัฒนาและนักออกแบบเว็บไซต์ส่วนใหญ่มีโซลูชันที่ได้รับการพิสูจน์แล้ว แต่พวกเขามักจะมองหาสิ่งใหม่ๆ อยู่เสมอ และ “สิ่งใหม่” นี้รวมถึง:

ตัวหมุนแบนเนอร์

แบนเนอร์พร้อมตัวอย่าง

แบนเนอร์พร้อมเพลย์ลิสต์

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

ม้าหมุน

ตัวเลื่อนทุกประเภทรองรับฟังก์ชันการทำงานส่วนใหญ่ที่จำเป็นโดยตัวเลื่อน jQuery All In One Slider จะเป็นแบบรวมทุกอย่างของคุณหรือไม่?

หากแถบเลื่อนของคุณไม่ตอบสนองและไม่รองรับหน้าจอสัมผัส แสดงว่าคุณมีแถบเลื่อนผิด UnoSlider ถูกต้อง

แถบเลื่อนนี้พบตำแหน่งที่ลงตัวระหว่างความเรียบง่ายและชุดฟังก์ชันที่หลากหลาย ฟังก์ชั่น:

การสนับสนุนธีม

12 ธีมสำเร็จรูป

40 ช่วงการเปลี่ยนภาพ

รองรับ IE6+

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

กำลังมองหา “ตัวเลื่อน jQuery หนึ่งตัวเพื่อควบคุมพวกมันทั้งหมด” อยู่ใช่ไหม? ลองใช้ Master Slider – แถบเลื่อนหน้าจอสัมผัส JQuery ด้านล่าง ขนาดที่แตกต่างกันหน้าจอ...

เมื่อพูดถึงการออกแบบที่ดี ตัวอย่างนี้เป็นหนึ่งในตัวอย่างที่ดีที่สุด:

เทมเพลตมากกว่า 25 แบบ

การเปลี่ยนแปลงแบบเร่งด้วยฮาร์ดแวร์

รองรับการสัมผัสและปัดนิ้ว

และอีกมากมาย

การเปลี่ยนภาพแบบโต้ตอบ เลเยอร์ภาพเคลื่อนไหว และฮอตสปอตจะดึงดูดความสนใจของคุณอย่างแน่นอน Master Slider คืองานศิลปะ

TouchCarousel ให้การสนับสนุนและอัปเดตฟรี อย่างไรก็ตาม นั่นไม่ใช่คุณสมบัติทั้งหมดของแถบเลื่อน jQuery carousel ที่มีน้ำหนักเบานี้

หากมีคำว่า “สัมผัส” อยู่ในชื่อ คุณสามารถเดาได้ว่าแถบเลื่อนนั้นสามารถปรับได้อย่างเต็มที่และรองรับการสัมผัส คุณสมบัติอื่นๆ:

การเพิ่มประสิทธิภาพ SEO

เล่นอัตโนมัติอัจฉริยะ

การเปลี่ยน CSS3 ด้วยการเร่งด้วยฮาร์ดแวร์

UI ที่ปรับแต่งได้และ 4 สกินสำหรับ Photoshop

TouchCarousel เนื่องจากการเลื่อนสไลด์ทางกายภาพที่เป็นเอกลักษณ์ ทำให้ประสบการณ์มือถือก้าวไปสู่อีกระดับหนึ่ง

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

ด้วยมาร์กอัป HTML หรือ XML แถบเลื่อนขั้นสูงนี้สร้างความประทับใจไม่รู้ลืม:

เลเยอร์ภาพเคลื่อนไหวและวิดีโออัจฉริยะ

การเปลี่ยนภาพมากกว่า 100 แบบและคุณสมบัติที่กำหนดเองมากกว่า 150 รายการ

สกินตัวเลื่อน 15 ตัว, สกินแถบเลื่อน 7 อัน และการสนับสนุนไลท์บ็อกซ์ในตัว

การนำทางด้วยคีย์บอร์ด รองรับการสัมผัส และการปรับแต่งเต็มรูปแบบ

และอีกมากมาย

อย่างไรก็ตามมากที่สุด คุณสมบัติที่ดีที่สุดตัวเลื่อนขั้นสูงนี้เป็น jQuery XML Slider API ที่ทำให้ตัวเลื่อนเป็นตัวเลือกที่เหมาะสำหรับเว็บแอปพลิเคชันของคุณ

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

เอฟเฟ็กต์การซูมค่อนข้างอ่อนแอ แต่เพิ่มความรู้สึกในการควบคุมและการสัมผัสที่แท้จริงให้กับภาพ ในขณะที่แถบเลื่อนที่เหลือยังคงนิ่ง คุณสมบัติพิเศษของตัวเลื่อน:

การเปลี่ยนเลเยอร์ CSS3

ตัวเลือกสิ้นสุดภาพเคลื่อนไหวสำหรับเลเยอร์

ตัวเลือกความกว้างคงที่ เต็มหน้าจอ และเต็มความกว้าง

ข้อความเคลื่อนไหวพร้อมการจัดรูปแบบ HTML และ CSS

แถบเลื่อนส่วนใหญ่พยายามรวมเอฟเฟกต์ให้ได้มากที่สุดเท่าที่จะเป็นไปได้ แต่ jQuery Slider Zoom In/Out Effect Fully Responsive มีเพียงเอฟเฟกต์ Ken Burns เท่านั้น แต่มีการนำไปใช้อย่างดี

เช่นเดียวกับ Advanced Slider - jQuery XML Slider ที่กล่าวมาข้างต้น jQuery Carousel Evolution มี API ของตัวเองที่สามารถใช้เพื่อปรับปรุงฟังก์ชันการทำงานหรือรวมตัวเลื่อนเข้ากับโครงการอื่น

จะสร้างเว็บไซต์ด้วยตัวเองได้อย่างไร?

วันนี้จำเป็นต้องมีเทคโนโลยีและความรู้อะไรบ้างในการสร้างเว็บไซต์ด้วยตัวเอง? ค้นหาแบบเข้มข้น!

ด้วยรูปภาพ มาร์กอัป HTML วิดีโอ YouTube และ Vimeo คุณยังจะได้รับ:

การเพิ่มประสิทธิภาพ SEO

9 รูปแบบม้าหมุน

เอฟเฟกต์เงาและการสะท้อน

สามารถปรับขนาดภาพได้ทั้งด้านหน้าและด้านหลัง

jQuery Carousel Evolution เป็นม้าหมุนที่เรียบง่ายพร้อมกรณีการใช้งานมากมาย

Sexy Slider จะไม่เซ็กซี่เหมือนเมื่อก่อนอีกต่อไป อย่างไรก็ตามเนื่องจากอายุของมัน ตัวเลื่อนนี้จึงน่าเชื่อถือ

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

เล่นสไลด์อัตโนมัติ

คำบรรยายภาพ

การเล่นสไลด์อย่างต่อเนื่อง

เอฟเฟกต์การเปลี่ยนแปลง 6 แบบ

Sexy Slider กำลังรอให้คุณปลดล็อกพลังและศักยภาพเต็มที่

ด้วยการออกแบบที่เหมาะกับมือถือและการรองรับหน้าจอสัมผัส เป็นเรื่องดีที่ได้เห็นแถบเลื่อน jQuery ที่ไม่ลืมเกี่ยวกับคอมพิวเตอร์เดสก์ท็อป

jQuery Image & Content Scroller พร้อม Lightbox รองรับการป้อนข้อมูลด้วยแป้นพิมพ์และล้อเมาส์ รวมถึงคุณสมบัติอื่น ๆ :

การวางแนวแนวนอนและแนวตั้ง

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

ความสามารถในการกำหนดจำนวนสไลด์ที่มองเห็นได้ในคราวเดียว

รูปภาพแบบอินไลน์, Flash, iframe, Ajax และเนื้อหาแบบอินไลน์

แถบเลื่อนยังมีไลท์บ็อกซ์ในตัวด้วย หากคุณต้องการใน jQuery Image & Content Scroller พร้อม Lightbox คุณจะไม่สามารถเปิดแถบเลื่อนได้เอง แต่เปิด lightbox แยกกัน

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

แถบเลื่อนมีการตั้งค่าล่วงหน้ามากมาย คุณอาจต้องตั้งค่าบางอย่างเท่านั้นเอง ความเป็นไปได้:

6 สไตล์ที่แตกต่างกัน

เอฟเฟกต์การเปลี่ยนแปลง 4 แบบ

การเปลี่ยนการปัด 2 ครั้ง

ปุ่มและคำบรรยายที่ปรับแต่งได้

เช่นเดียวกับตัวเลื่อนอื่นๆ แถบเลื่อนนี้ไวต่อการสัมผัส ตอบสนอง และมี การเร่งความเร็วด้วยฮาร์ดแวร์- Translucent เป็นตัวเลื่อนที่มีการออกแบบที่เรียบง่ายโดยให้ความสำคัญกับเนื้อหาเป็นอันดับแรก

คุณต้องการสร้างเว็บไซต์แบบเต็มหน้าจอที่ประกอบด้วยสไลด์หรือไม่? ถ้าอย่างนั้นคุณต้องมี FSS

ในความเป็นจริง การใช้แถบเลื่อน JQuery นี้ทำให้การสร้างเว็บไซต์แถบเลื่อนแบบเต็มหน้าจอเป็นเรื่องง่ายมาก ความเป็นไปได้:

การสนับสนุน AJAX

แถบเลื่อน

รองรับเทคโนโลยี Deep Linking

เอฟเฟกต์การเปลี่ยนแปลงที่แตกต่างกัน 2 แบบ

นอกจากนี้ยังควรให้ความสนใจกับการรองรับแป้นพิมพ์และคำแนะนำ 11 หน้าด้วย แต่ความประทับใจที่แท้จริงคือน้ำหนักของ FSS เพียง 5Kb เท่านั้น

อื่น ตัวอย่างเจคิวรี่แถบเลื่อนที่เน้นสไตล์และทำงานได้ดี Zozo Accordion เป็นสิ่งที่ต้องมีสำหรับผู้ที่มองหาแถบเลื่อนหีบเพลงที่ดีพร้อมความสามารถในการเปลี่ยนสไตล์

ความสวยงามของแอนิเมชั่น CSS3 นี้ยังมีคุณสมบัติที่หลากหลายอีกด้วย:

หีบเพลงแนวนอนและแนวตั้ง

การเพิ่มประสิทธิภาพความหมาย HTML5 และ SEO

รองรับระบบสัมผัส คีย์บอร์ด และ WAI-ARIA

มากกว่า 10 สกินและ 6 เลย์เอาต์

และอีกมากมาย

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

ปลั๊กอิน jQuery Responsive OneByOne Slider เป็นเหมือนแอนิเมชั่นธรรมดามากกว่าตัวเลื่อน แทนที่จะแสดงทีละสไลด์ อินสแตนซ์นี้จะเต็มหน้าจอด้วยสไลด์ทีละขั้นจนกระทั่งไม่มีพื้นที่เหลือในพื้นที่ก่อนที่จะไปยังสไลด์ถัดไป

แอนิเมชัน CSS3 ทำงานจาก Animate.css ซึ่งมีน้ำหนักเบา ประกอบด้วยหลายเลเยอร์และเป็นมิตรกับสิ่งแวดล้อม อุปกรณ์เคลื่อนที่- คุณสมบัติหลายประการ:

นอกจากนี้ยังมีตัวเลือกการนำทางแบบลากและวาง ปลั๊กอิน jQuery Responsive OneByOne Slider ขับเคลื่อนโดย Twitter Bootstrap Carousel

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

หากคุณไม่ชอบตัวเลือกสไตล์ทั้งสามนี้ คุณสามารถปรับแต่ง HTML และ CSS ได้ด้วยตัวเอง ความเป็นไปได้:

การนำทางด้วยแป้นพิมพ์

ปรับแต่งเอฟเฟกต์และปุ่มได้ง่าย

เทคนิคการปรับปรุงแบบก้าวหน้า - ทำงานโดยไม่ต้องใช้ JavaScript

โปรดจำไว้ว่า Accordionza สามารถแสดงเนื้อหาแบบผสมได้หลายรูปแบบ ทำให้มีความยืดหยุ่นอย่างมาก

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

ภายใต้ประทุนคุณจะพบกับตัวเลือกมากมาย:

รองรับคีย์บอร์ด เมาส์ และการสัมผัส

การเปลี่ยน CSS3 ด้วยการเร่งด้วยฮาร์ดแวร์

ทำความสะอาดมาร์กอัปที่ถูกต้องและการเพิ่มประสิทธิภาพ SEO

ไม่จำกัดจำนวนสไลด์ เลเยอร์คำบรรยายและเอฟเฟ็กต์สำหรับสไลด์เหล่านั้น

API มีประสิทธิภาพมากและเป็นมิตรกับนักพัฒนาซึ่งเปิดขึ้น วิธีต่างๆการใช้งาน MightySlider เป็นตัวเลื่อน jQuery ที่ยอดเยี่ยมและก้าวหน้า พร้อมด้วยโค้ดที่สะอาดตาและมีการแสดงความคิดเห็นที่ดี

Parallax Slider ทำงานเหมือนกับ jQuery Responsive OneByOne Slider Plugin และช่วยให้คุณสร้างภาพเคลื่อนไหวแต่ละเลเยอร์แยกกันภายในสไลด์เดียว คุณสามารถทำให้สไลด์ทั้งหมดเคลื่อนไหวหรือเพียงสไลด์เดียวได้โดยการเพิ่มภาพเคลื่อนไหวแบบพารัลแลกซ์

ใน รวมอยู่ด้วยแถบเลื่อน 4 อัน ประเภทต่างๆทั้งหมดนี้มีเอฟเฟกต์พารัลแลกซ์ เช่นเดียวกับแถบเลื่อน jQuery อื่น ๆ มันมี:

ปรับแต่งได้เต็มที่

รองรับการสัมผัส

ตอบสนองอย่างเต็มที่และไม่จำกัดเลเยอร์

เล่นอัตโนมัติ การวนซ้ำ การปรับความสูงและความกว้าง และการจับเวลา

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

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

หากคุณไม่ชอบแถบเลื่อนใดๆ ในรายการนี้ คุณสามารถใช้บทช่วยสอนโค้ด jQuery บน Envato และออกแบบสิ่งใหม่ที่ไม่ซ้ำใครได้เสมอ

หรือลองดูแถบเลื่อนอื่นๆ บน Envato Market ซึ่งมีให้เลือกมากมาย ตัวเลื่อน jQuery ที่คุณชื่นชอบคืออะไรและเพราะเหตุใด