แถบเลื่อนอย่างง่ายพร้อมการแสดงตัวอย่าง jquery การสร้างแถบเลื่อนอย่างง่ายโดยใช้ jQuery UnoSlider - ตัวเลื่อนหน้าจอสัมผัสแบบปรับได้

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

เนื่องจากความหลากหลายของเครื่องมือที่นำเสนอ ฉันจึงได้รวบรวมภาพรวมโดยย่อของการพัฒนาที่โดดเด่นที่สุดของตัวเลื่อนรูปภาพ jQuery ที่ตอบสนองซึ่งปรากฏเมื่อเร็ว ๆ นี้และเผยแพร่โดยไม่มีข้อจำกัดใด ๆ เช่น ฟรีอย่างแน่นอน

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

แถบเลื่อนรูปภาพ jQuery ที่ตอบสนองพร้อมชุดเอฟเฟกต์ภาพที่ยอดเยี่ยม (การหมุน การลอยออก การเบลอ เกลียว มู่ลี่ ฯลฯ...) และอื่นๆ อีกมากมาย เทมเพลตสำเร็จรูป- ด้วยวิซาร์ดการแทรกหน้าในตัวของ WOW Slider คุณสามารถสร้างสไลด์โชว์ที่น่าทึ่งได้อย่างง่ายดายและง่ายดายภายในไม่กี่นาที เว็บไซต์ของนักพัฒนาประกอบด้วยเอกสารที่จำเป็นทั้งหมดสำหรับการตั้งค่าและใช้งานปลั๊กอินในภาษารัสเซีย รวมถึงตัวอย่างการทำงานของปลั๊กอินแบบเรียลไทม์ที่ยอดเยี่ยม มีให้ดาวน์โหลดแยกกันด้วย ปลั๊กอินเวิร์ดเพรสและโมดูลสำหรับ Joomla ฉันแน่ใจว่าหลายๆ คนจะชอบแถบเลื่อนที่ยอดเยี่ยมนี้ ทั้งผู้เริ่มต้นและผู้ดูแลเว็บที่มีประสบการณ์

ไฮสไลเดอร์

HiSlider - HTML5, ตัวเลื่อน Jquery และแกลเลอรีรูปภาพ, ปลั๊กอินฟรีสำหรับการใช้งานส่วนตัวบนเว็บไซต์ที่ใช้ระบบยอดนิยม - WordPress, Joomla, Drupal ด้วยความช่วยเหลือของเครื่องมือที่เรียบง่ายแต่ใช้งานได้ดีนี้ คุณสามารถสร้างสไลด์โชว์ที่น่าทึ่งและมีชีวิตชีวา การนำเสนอที่น่าทึ่ง และการประกาศข้อความใหม่บนหน้าเว็บไซต์ของคุณได้อย่างง่ายดาย เทมเพลตและสกินสำเร็จรูปหลายแบบสำหรับแถบเลื่อน เอฟเฟกต์การเปลี่ยน (เปลี่ยนแปลง) เนื้อหาที่น่าทึ่ง เอาต์พุตของเนื้อหามัลติมีเดียต่างๆ: วิดีโอจาก YouTube และ Vimeo การตั้งค่าผู้ใช้ที่ยืดหยุ่น ฯลฯ...

นีโว สไลเดอร์

Nivo Slider เป็นโปรแกรมเก่าที่ดี ซึ่งทุกคนรู้จักดี ซึ่งเป็นหนึ่งในโปรแกรมเลื่อนรูปภาพที่สวยงามและใช้งานง่ายที่สุด ปลั๊กอิน JQuery Nivo Slider สามารถดาวน์โหลดและใช้งานได้ฟรี และได้รับอนุญาตภายใต้ใบอนุญาต MIT นอกจากนี้ยังมีปลั๊กอินแยกต่างหากสำหรับ WordPress แต่น่าเสียดายที่มันได้รับการชำระเงินแล้ว และคุณจะต้องจ่าย $29 สำหรับใบอนุญาตหนึ่งใบ เป็นการดีกว่าถ้าใช้ไฟล์ธีม WP และแนบปลั๊กอิน Nivo Slider เวอร์ชัน jQuery ฟรีลงในบล็อกของคุณ เนื่องจากมีข้อมูลมากมายเกี่ยวกับวิธีการทำเช่นนี้บนอินเทอร์เน็ต
ในส่วนของฟังก์ชันการทำงาน ทุกอย่างเรียบร้อยดี มันใช้ไลบรารี jQuery v1.7+, เอฟเฟกต์การเปลี่ยนแปลงที่สวยงาม, การตั้งค่าที่เรียบง่ายและยืดหยุ่นมาก, รูปแบบที่ปรับเปลี่ยนได้, การครอบตัดรูปภาพอัตโนมัติ และอื่นๆ อีกมากมาย

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

สลิทสไลเดอร์

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

ตัวเลื่อนเนื้อหาแบบยืดหยุ่น

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

ตัวเลื่อนสแต็ค 3 มิติ

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

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

สไลด์น้อยที่สุด

ชื่อนี้พูดได้ด้วยตัวมันเอง นี่อาจเป็นหนึ่งในแถบเลื่อนรูปภาพ jQuery ที่เบาและเรียบง่ายที่สุดที่ฉันเคยเจอ (ปลั๊กอิน 1kb) ResponsiveSlides.jsเป็นปลั๊กอิน jQuery เล็กๆ ที่สร้างสไลด์โชว์โดยใช้องค์ประกอบภายในคอนเทนเนอร์ ใช้งานได้กับเบราว์เซอร์ที่หลากหลาย รวมถึง IE ทุกรุ่น ซึ่งเป็นตัวหยุดความคืบหน้าอันโด่งดังตั้งแต่ IE6 ขึ้นไป งานใช้การเปลี่ยน CSS3 ร่วมกับจาวาสคริปต์เพื่อความน่าเชื่อถือ รูปแบบเรียบง่ายโดยใช้รายการแบบไม่เรียงลำดับ การปรับแต่งช่วงการเปลี่ยนภาพและช่วงเวลา การควบคุมการสลับสไลด์แบบอัตโนมัติและแบบแมนนวล ตลอดจนรองรับการแสดงสไลด์หลายรายการพร้อมกัน นี่คือ "ทารก" ที่ขี้เล่น

กล้อง

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

bxSlider jQuery

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

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

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

แกลเลอเรีย

ปลั๊กอิน jQuery ตอบสนองที่รู้จักกันดีและค่อนข้างเป็นที่นิยมสำหรับการสร้างแกลเลอรี่ภาพและแถบเลื่อนคุณภาพสูง อินเทอร์เฟซตัวเลื่อนต้องขอบคุณแผงควบคุมที่มีลักษณะคล้ายกับเครื่องเล่นวิดีโอที่คุ้นเคย ปลั๊กอินมีธีมการออกแบบที่แตกต่างกันมากมาย รองรับวิดีโอและรูปภาพแบบฝังจากบริการยอดนิยม: Flickr, Vimeo, YouTube และอื่น ๆ เอกสารรายละเอียดเกี่ยวกับการตั้งค่าและการใช้งาน

บลูเบอร์รี่

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

jQuery ป๊อปอาย 2.1.1

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

ลำดับ

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

ปัด

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

ตัวเลื่อนรูปภาพตอบสนอง

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

เศษส่วนสไลเดอร์

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

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

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

ขอแสดงความนับถืออันเดรย์

1. สไลด์โชว์ jQuery ที่ยอดเยี่ยม

สไลด์โชว์ขนาดใหญ่ที่น่าทึ่งโดยใช้เทคโนโลยี jQuery

2. ปลั๊กอิน jQuery “Scale Carousel”

สไลด์โชว์ที่ปรับขนาดได้โดยใช้ jQuery คุณสามารถกำหนดขนาดสไลด์โชว์ที่เหมาะกับคุณที่สุดได้

3. ปลั๊กอิน jQuery “slideJS”

แถบเลื่อนรูปภาพพร้อมคำอธิบายข้อความ

4. ปลั๊กอิน “JSliderNews”

5. แถบเลื่อน CSS3 jQuery

เมื่อคุณโฮเวอร์เหนือลูกศรนำทาง รูปขนาดย่อแบบวงกลมของสไลด์ถัดไปจะปรากฏขึ้น

6. แถบเลื่อน jQuery “Presentation Cycle” ที่ดี

แถบเลื่อน jQuery พร้อมตัวบ่งชี้การโหลดรูปภาพ มีการเปลี่ยนสไลด์อัตโนมัติ

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

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

8. ตัวเลื่อน jQuery ที่สดใหม่และมีน้ำหนักเบา “bxSlider 3.0”

ในหน้าสาธิตในส่วน "ตัวอย่าง" คุณจะพบลิงก์ไปยังทั้งหมด ตัวเลือกที่เป็นไปได้ใช้ปลั๊กอินนี้

9. ตัวเลื่อนรูปภาพ jQuery, ปลั๊กอิน “slideJS”

แถบเลื่อน jQuery ที่มีสไตล์สามารถตกแต่งโครงการของคุณได้อย่างแน่นอน

10. ปลั๊กอินสไลด์โชว์ jQuery “Easy Slides” v1.1

ง่ายต่อการ โดยใช้ JQueryปลั๊กอินสำหรับสร้างสไลด์โชว์

11. ปลั๊กอิน jQuery Slidy

ปลั๊กอิน jQuery น้ำหนักเบาในเวอร์ชันต่างๆ มีการเปลี่ยนสไลด์อัตโนมัติ

12. แกลเลอรี jQuery CSS พร้อมการเปลี่ยนสไลด์อัตโนมัติ

หากผู้เข้าชมไม่คลิกที่ลูกศร "ไปข้างหน้า" หรือ "ย้อนกลับ" ภายในเวลาที่กำหนด แกลเลอรีจะเริ่มเลื่อนโดยอัตโนมัติ

13. แถบเลื่อน jQuery “Nivo Slider”

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

14. แถบเลื่อน jQuery “MobilySlider”

สไลเดอร์สด. แถบเลื่อน jQuery พร้อมเอฟเฟกต์การเปลี่ยนรูปภาพต่างๆ

15. ปลั๊กอิน jQuery “Slider²”

สไลเดอร์น้ำหนักเบาพร้อมตัวเปลี่ยนสไลด์อัตโนมัติ

16. ตัวเลื่อนจาวาสคริปต์สด

แถบเลื่อนพร้อมการเปลี่ยนภาพอัตโนมัติ

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

ตัวเลื่อนรูปภาพ jQuery CSS โดยใช้ปลั๊กอิน NivoSlider

19. แถบเลื่อน jQuery “jShowOff”

ปลั๊กอินสำหรับการหมุนเวียนเนื้อหา สามตัวเลือกสำหรับการใช้งาน: ไม่มีการนำทาง (พร้อมการเปลี่ยนรูปแบบการนำเสนอภาพนิ่งอัตโนมัติ) พร้อมการนำทางในรูปแบบของปุ่มพร้อมการนำทางในรูปแบบของภาพขนาดย่อ

20. ปลั๊กอิน “ผลงานชัตเตอร์เอฟเฟกต์”

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

21. ตัวเลื่อน CSS javascript น้ำหนักเบา “TinySlider 2”

การใช้งานแถบเลื่อนรูปภาพโดยใช้ javascript และ CSS

22. สไลเดอร์สุดเจ๋ง “Tinycircleslider”

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

23. ตัวเลื่อนรูปภาพด้วย jQuery

สไลเดอร์น้ำหนักเบา “Slider Kit”. แถบเลื่อนมีให้เลือกหลายแบบทั้งแนวตั้งและแนวนอน นำไปปฏิบัติด้วย ประเภทต่างๆการนำทางระหว่างรูปภาพ: ใช้ปุ่ม "ไปข้างหน้า" และ "ย้อนกลับ" โดยใช้ล้อเลื่อนของเมาส์โดยใช้การคลิกเมาส์บนสไลด์

24. แกลเลอรีพร้อมภาพจำลอง “Slider Kit”

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

25. ตัวเลื่อนเนื้อหา jQuery “Slider Kit”

แถบเลื่อนเนื้อหาแนวตั้งและแนวนอนโดยใช้ jQuery

26. สไลด์โชว์ jQuery “ชุดตัวเลื่อน”

สไลด์โชว์พร้อมการเปลี่ยนสไลด์อัตโนมัติ

27. ตัวเลื่อน CSS3 จาวาสคริปต์ระดับมืออาชีพน้ำหนักเบา

แถบเลื่อน jQuery และ CSS3 ที่เรียบร้อยสร้างขึ้นในปี 2011

สไลด์โชว์ jQuery พร้อมภาพขนาดย่อ

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

สไลด์โชว์พร้อมปุ่มนำทาง

30. สไลด์โชว์ jQuery “Skitter” ที่ยอดเยี่ยม

ปลั๊กอิน jQuery Skitter สำหรับสร้างสไลด์โชว์ที่น่าทึ่ง ปลั๊กอินรองรับเอฟเฟกต์ภาพเคลื่อนไหวที่แตกต่างกัน 22 (!) ประเภทเมื่อเปลี่ยนรูปภาพ สามารถทำงานร่วมกับตัวเลือกการนำทางสไลด์ได้สองแบบ: การใช้หมายเลขสไลด์และการใช้ภาพขนาดย่อ อย่าลืมชมการสาธิตซึ่งเป็นการค้นหาคุณภาพสูงมาก เทคโนโลยีที่ใช้: CSS, HTML, jQuery, PHP

31. สไลด์โชว์ “อึดอัด”

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

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

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

34. แถบเลื่อน “Flux Slider” โดยใช้ jQuery และ CSS3

ตัวเลื่อน jQuery ใหม่ เอฟเฟกต์ภาพเคลื่อนไหวสุดเจ๋งมากมายเมื่อเปลี่ยนสไลด์

35. ปลั๊กอิน jQuery “jSwitch”

แกลเลอรี่ jQuery เคลื่อนไหว

สไลด์โชว์ jQuery น้ำหนักเบาพร้อมการเปลี่ยนสไลด์อัตโนมัติ

37. ปลั๊กอินเวอร์ชันใหม่ “SlideDeck 1.2.2”

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

38. แถบเลื่อน jQuery “Sudo Slider”

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

39. สไลด์โชว์ jQuery CSS3

สไลด์โชว์พร้อมรูปขนาดย่อรองรับโหมดเปลี่ยนสไลด์อัตโนมัติ

40. ตัวเลื่อน jQuery “Flux Slider”

สไลเดอร์พร้อมเอฟเฟกต์การเปลี่ยนภาพมากมาย

41. ตัวเลื่อน jQuery อย่างง่าย

แถบเลื่อนรูปภาพที่มีสไตล์โดยใช้ jQuery

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

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

1. RoyalSlider - แกลเลอรี่ภาพหน้าจอสัมผัสโดยใช้ jQuery

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

บาง คุณสมบัติที่น่าสนใจ:

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

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

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

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

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

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

2. ปลั๊กอิน jQuery ที่ตอบสนองต่อ Slider Revolution

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

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

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

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

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

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

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

3. ปลั๊กอินตัวเลื่อน jQuery แบบปรับได้ LayerSlider

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

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

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

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

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

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

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

4. jQuery Banner Rotator / สไลด์โชว์

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

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

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

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

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

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

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

5. All In One Slider – ปลั๊กอินตัวเลื่อน jQuery ที่ตอบสนอง

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

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

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

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

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

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

ม้าหมุน

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

6. UnoSlider - ตัวเลื่อนหน้าจอสัมผัสแบบปรับได้

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

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

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

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

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

รองรับ IE6+

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

7. Master Slider - ตัวเลื่อนหน้าจอสัมผัส jQuery

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

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

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

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

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

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

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

8. TouchCarousel - ตัวเลื่อนและตัวเลื่อนเนื้อหา jQuery

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

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

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

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

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

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

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

9. ตัวเลื่อนขั้นสูง - ตัวเลื่อน jQuery XML

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

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

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

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

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

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

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

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

10. jQuery Slider เอฟเฟกต์การซูมเข้า / ออกตอบสนองอย่างเต็มที่

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

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

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

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

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

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

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

11. วิวัฒนาการ jQuery ม้าหมุน

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

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

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

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

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

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

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

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

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

12. สไลเดอร์สุดเซ็กซี่

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

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

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

คำบรรยายภาพ

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

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

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

13. jQuery Image & Content Scroller พร้อมไลท์บ็อกซ์

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

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

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

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

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

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

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

14. โปร่งแสง – ​​ตัวหมุน/ตัวเลื่อนแบนเนอร์แบบปรับได้

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

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

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

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

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

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

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

15. FSS - ปลั๊กอินเว็บไซต์แบบเลื่อนแบบเต็มหน้าจอ

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

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

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

แถบเลื่อน

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

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

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

16. Zozo Accordion – แถบเลื่อนหน้าจอสัมผัสแบบปรับได้

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

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

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

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

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

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

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

Zozo Accordion ได้รับการสนับสนุนฟรีและ การปรับปรุงอย่างต่อเนื่องรวมถึงคุณสมบัติทั้งหมดที่คุณต้องการเห็นใน jQuery accordion

17. ปลั๊กอินตัวเลื่อน OneByOne ที่ตอบสนองต่อ jQuery

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

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

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

18. Accordionza - ปลั๊กอิน jQuery

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

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

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

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

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

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

19. MightySlider – แถบเลื่อนอเนกประสงค์ที่ตอบสนอง

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

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

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

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

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

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

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

20. Parallax Slider - ปลั๊กอิน jQuery ที่ตอบสนอง

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

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

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

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

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

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

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

บทสรุป

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

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

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

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

เราสามารถเปลี่ยนแปลงปลั๊กอินเหล่านี้บางส่วนและสร้างแถบเลื่อนใหม่ที่เหมาะกับวัตถุประสงค์ของไซต์ของเรามากขึ้น

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

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

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

ตัวเลื่อนตอบสนอง Jssor

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

• การออกแบบที่ปรับเปลี่ยนได้
• ตัวเลือกการปรับแต่งมากกว่า 15 แบบ;
• เอฟเฟกต์การเปลี่ยนภาพมากกว่า 15 แบบ;
• แกลเลอรี่ภาพ, ม้าหมุน, รองรับขนาดเต็มหน้าจอ;
• ตัวหมุนแบนเนอร์แนวตั้ง รายการสไลด์
• การสนับสนุนวิดีโอ

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

PgwSlider - ตัวเลื่อนตอบสนองตาม JQuery / Zepto

งานเดียวของปลั๊กอินนี้คือการแสดงสไลด์รูปภาพ มีขนาดกะทัดรัดมาก เนื่องจากไฟล์ JQuery มีขนาดเพียง 2.5 KB ซึ่งช่วยให้โหลดได้เร็วมาก:

• รูปแบบที่ปรับเปลี่ยนได้
• การเพิ่มประสิทธิภาพ SEO;
• รองรับเบราว์เซอร์ที่แตกต่างกัน
• การเปลี่ยนภาพอย่างง่าย
• ขนาดไฟล์เก็บถาวรเพียง 2.5 KB

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

ตัวเลื่อนข่าวแนวตั้ง Jquery

แถบเลื่อน JQuery ที่ยืดหยุ่นและมีประโยชน์ ออกแบบมาสำหรับแหล่งข่าวพร้อมรายการสิ่งพิมพ์ทางด้านซ้ายและรูปภาพที่แสดงทางด้านขวา:

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

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

วอลลอป สไลเดอร์

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

• รูปแบบที่ปรับเปลี่ยนได้
• การออกแบบที่เรียบง่าย
• ตัวเลือกการเปลี่ยนสไลด์ต่างๆ
• รหัส JavaScript ขั้นต่ำ;
• ขนาดเพียง 3KB

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

แกลเลอรี่โพลารอยด์สไตล์แบน

แกลเลอรีสไตล์ที่กระจายเอกสารบนโต๊ะพร้อมเค้าโครงที่ยืดหยุ่นและการออกแบบที่สวยงามน่าจะเป็นที่สนใจของหลายๆ คน เหมาะสำหรับแท็บเล็ตและจอแสดงผลขนาดใหญ่:

• แถบเลื่อนแบบปรับได้;
• การออกแบบที่เรียบ;
• การเปลี่ยนสไลด์แบบสุ่ม
• เข้าถึงซอร์สโค้ดแบบเต็ม

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

A-สไลเดอร์

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

HiSlider – ตัวเลื่อนรูปภาพ HTML5, jQuery และ WordPress

HiSlider ได้เปิดตัวปลั๊กอินตัวเลื่อน jQuery ฟรีใหม่ ซึ่งคุณสามารถสร้างแกลเลอรีรูปภาพที่หลากหลายพร้อมการเปลี่ยนภาพที่ยอดเยี่ยม:

• แถบเลื่อนแบบปรับได้;
• ไม่ต้องการความรู้ด้านการเขียนโปรแกรม
• เทมเพลตและสกินที่น่าทึ่งมากมาย
• เอฟเฟกต์การเปลี่ยนแปลงที่สวยงาม
• รองรับแพลตฟอร์มต่าง ๆ
• เข้ากันได้กับ WordPress, Joomla, Drupal;
• ความสามารถในการแสดงเนื้อหาประเภทต่าง ๆ : รูปภาพ, วิดีโอยูทูปและวิดีโอ Vimeo;
• การตั้งค่าที่ยืดหยุ่น
• คุณสมบัติเพิ่มเติมที่เป็นประโยชน์
• แสดงเนื้อหาได้ไม่จำกัดจำนวน

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

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

WOW Slider คือ แถบเลื่อน jQuery ที่ตอบสนองภาพที่มีเอฟเฟ็กต์ภาพที่น่าทึ่ง ( โดมิโน, หมุน, เบลอ, พลิกและแฟลช, บินออกไป, มู่ลี่) และเทมเพลตระดับมืออาชีพ

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

• ตอบสนองอย่างเต็มที่;
• รองรับเบราว์เซอร์และอุปกรณ์ทุกประเภท
• รองรับอุปกรณ์สัมผัส
• ติดตั้งง่ายบน WordPress;
• ความยืดหยุ่นในการกำหนดค่า
• เพิ่มประสิทธิภาพ SEO

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

Nivo Slider – ปลั๊กอิน jQuery ฟรี

Nivo Slider เป็นที่รู้จักไปทั่วโลกว่าเป็นแถบเลื่อนรูปภาพที่สวยงามและใช้งานง่ายที่สุด ปลั๊กอิน Nivo Slider นั้นฟรีและเผยแพร่ภายใต้ลิขสิทธิ์ MIT:

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

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

แถบเลื่อน jQuery อย่างง่ายพร้อมเอกสารทางเทคนิค

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

• รูปแบบที่ปรับเปลี่ยนได้
• การออกแบบที่เรียบง่าย
• เอฟเฟกต์การเลื่อนออกและการเปลี่ยนสไลด์ต่างๆ

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

แถบเลื่อนรูปภาพ jQuery ขนาดเต็ม

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

เมื่อติดตั้งแล้ว ตัวเลื่อนจะขยายเป็น 100% ของความกว้างหน้าจอ นอกจากนี้ยังสามารถลดขนาดภาพสไลด์ได้โดยอัตโนมัติ:

• แถบเลื่อน JQuery แบบปรับได้;
• ขนาดเต็ม;
• การออกแบบที่เรียบง่าย

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

แถบเลื่อนเนื้อหาแบบยืดหยุ่น + บทช่วยสอน

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

เมื่อดูบนหน้าจอแนวทแยงขนาดเล็ก แท็บการนำทางจะกลายเป็นไอคอนขนาดเล็ก:

• การออกแบบที่ปรับเปลี่ยนได้
• การคลิกเมาส์เลื่อน

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

ฟรี 3D Stack Slider

แถบเลื่อนทดลองที่เลื่อนดูภาพในรูปแบบ 3 มิติ ทั้งสองปึกมีลักษณะคล้ายกับปึกกระดาษ ซึ่งเมื่อเลื่อน รูปภาพจะแสดงที่กึ่งกลางของแถบเลื่อน:

• การออกแบบที่ปรับเปลี่ยนได้
• พลิก - การเปลี่ยนแปลง;
• เอฟเฟกต์ 3 มิติ

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

Slit Slider แบบเต็มหน้าจอตามบทช่วยสอน JQuery และ CSS3 +

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

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

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

Unislider - ตัวเลื่อน jQuery ขนาดเล็กมาก

ไม่มีเสียงระฆังและนกหวีดที่ไม่จำเป็น ขนาดน้อยกว่า 3KB ใช้โค้ด HTML สำหรับสไลด์ของคุณ และขยายด้วย ใช้ CSS- ทุกอย่างที่เกี่ยวข้องกับ Unslider โฮสต์อยู่บน GitHub:

• รองรับเบราว์เซอร์ต่างๆ
• รองรับคีย์บอร์ด;
• ปรับความสูง;
• การออกแบบที่ปรับเปลี่ยนได้
• รองรับการป้อนข้อมูลแบบสัมผัส

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

สไลด์ตอบสนองน้อยที่สุด

ปลั๊กอินที่เรียบง่ายและกะทัดรัด ( ขนาดเพียง 1 KB) ซึ่งสร้างแถบเลื่อนแบบตอบสนองโดยใช้องค์ประกอบภายในคอนเทนเนอร์ ResponsiveSLides.js ทำงานร่วมกับเบราว์เซอร์ได้หลากหลาย รวมถึง IE ทุกเวอร์ชันตั้งแต่ IE6 ขึ้นไป:

• ตอบสนองอย่างเต็มที่;
• ขนาด 1 กิโลไบต์;
• การเปลี่ยน CSS3 พร้อมความสามารถในการทำงานผ่าน JavaScript
• มาร์กอัปอย่างง่ายโดยใช้รายการสัญลักษณ์แสดงหัวข้อย่อย
• ความสามารถในการปรับแต่งเอฟเฟ็กต์การเปลี่ยนแปลงและระยะเวลาการดูสไลด์เดียว
• รองรับความสามารถในการสร้างสไลด์โชว์หลายรายการ
• การเลื่อนแบบอัตโนมัติและแบบแมนนวล

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

กล้อง - ตัวเลื่อน jQuery ฟรี

กล้องเป็นปลั๊กอินที่มีเอฟเฟกต์การเปลี่ยนแปลงมากมายและรูปแบบที่ตอบสนอง ติดตั้งง่าย รองรับโดยอุปกรณ์มือถือ:

• การออกแบบที่ตอบสนองอย่างเต็มที่
• ลายเซ็น;
• ความสามารถในการเพิ่มวิดีโอ
• 33 ไอคอนสีที่แตกต่างกัน

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

SlidesJS ปลั๊กอิน jQuery ที่ตอบสนอง

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

• การออกแบบที่ปรับเปลี่ยนได้
• การเปลี่ยน CSS3;
• รองรับอุปกรณ์สัมผัส
• ติดตั้งง่าย.

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

ตัวเลื่อน BX Jquery

นี่คือแถบเลื่อน jQuery ที่ตอบสนองฟรี:

• ตอบสนองอย่างเต็มที่ - ปรับให้เข้ากับอุปกรณ์ใดก็ได้
• การเปลี่ยนสไลด์แนวนอนและแนวตั้ง
• สไลด์สามารถประกอบด้วยรูปภาพ วิดีโอ หรือเนื้อหา HTML;
• ขยายการสนับสนุนสำหรับอุปกรณ์สัมผัส
• การใช้ CSS Transitions สำหรับภาพเคลื่อนไหวแบบสไลด์ ( การเร่งความเร็วด้วยฮาร์ดแวร์);
• API การติดต่อกลับและวิธีการสาธารณะโดยสมบูรณ์
• ขนาดไฟล์เล็ก
• ง่ายต่อการปฏิบัติ

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

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

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

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

Galleria - แกลเลอรีรูปภาพที่ตอบสนองตาม JavaScript

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

• ฟรีโดยสมบูรณ์;
• โหมดการรับชมแบบเต็มหน้าจอ
• ปรับตัวได้ 100%;
• ไม่จำเป็นต้องมีประสบการณ์ด้านการเขียนโปรแกรม
• รองรับ iPhone, iPad และอุปกรณ์สัมผัสอื่น ๆ
• Flickr, Vimeo, YouTube และอีกมากมาย;
• หลายหัวข้อ

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

Blueberry - แถบเลื่อนรูปภาพ jQuery ที่ตอบสนองอย่างง่าย

ฉันขอนำเสนอแถบเลื่อนรูปภาพ jQuery ที่เขียนขึ้นเพื่อการออกแบบเว็บแบบตอบสนองโดยเฉพาะ Blueberry เป็นปลั๊กอินตัวเลื่อนรูปภาพโอเพ่นซอร์สรุ่นทดลองที่เขียนขึ้นเพื่อทำงานกับเทมเพลตที่ตอบสนองโดยเฉพาะ

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

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

การใช้ 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 และเดสก์ท็อปโดยไม่มีปัญหาความเข้ากันได้ เทมเพลตแบบหมุนที่น่าทึ่งในตัวช่วยให้คุณใช้แถบเลื่อนในโหมดแนวตั้ง แนวนอน และวงกลมได้

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