แถบเลื่อนตอบสนองโดยใช้ CSS3 การเลือกแถบเลื่อนที่ตอบสนอง แถบเลื่อนข้ามเบราว์เซอร์

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 ที่ตอบสนอง

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

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

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

บทสรุป

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

การใช้งาน 3 มิติ– การเปลี่ยนแปลงขึ้นอยู่กับ ซีเอสเอส– สไตล์และอีกเล็กน้อย จาวาสคริปต์รหัส.

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

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

Responsive Slider – ม้าหมุนใช้เทคโนโลยีที่เหมาะกับเว็บไซต์ใหม่ของคุณ

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

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

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

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

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

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

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

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

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

กล่องเลื่อน – ปลั๊กอิน jQuery

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

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

Flexisel: ปลั๊กอินตัวเลื่อน JQuery Carousel Slider ที่ตอบสนอง

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

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

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

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

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

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

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

คอลเลกชันฟรี แถบเลื่อน HTML และ CSSตัวอย่างโค้ด: การ์ด, การเปรียบเทียบ, เต็มหน้าจอ, ตอบสนอง, เรียบง่ายฯลฯ อัปเดตคอลเลกชันเดือนมิถุนายน 2018 7 รายการใหม่

สารบัญ

บทความที่เกี่ยวข้อง

เกี่ยวกับรหัส

ชุดหน้าจอการเริ่มต้นใช้งานใน HTML/CSS/JS การทดลองส่วนตัวกับการวางไอคอน PNG, การเปลี่ยน CSS3 และเฟล็กบ็อกซ์

แถบเลื่อนการ์ดข้อมูล HTML, CSS และ JavaScript
สร้างโดยแอนดี้ทราน
23 พฤศจิกายน 2558

ตัวเลื่อนรูปภาพที่ทำงานบนเบราว์เซอร์เดสก์ท็อปและมือถือ
จัดทำโดยทารอน
29 กันยายน 2014

แถบเลื่อนเปรียบเทียบ (ก่อน/หลัง)

เกี่ยวกับรหัส

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

เกี่ยวกับรหัส

แถบเลื่อนก่อนและหลังที่มีเฉพาะ html และ css

เกี่ยวกับรหัส

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

Vanilla JS มินิมอล น่าดู
จัดทำโดยหวู่
3 กรกฎาคม 2017

เกี่ยวกับรหัส

องค์ประกอบตัวเลื่อน "แยกหน้าจอ" พร้อม JavaScript

การทดลองเล็กๆ น้อยๆ สำหรับแถบเลื่อนก่อนและหลังทั้งหมดภายใน SVG การมาสก์ทำให้มันค่อนข้างง่าย เนื่องจากเป็น SVG ทั้งหมด รูปภาพและคำบรรยายจึงเข้ากันได้ดี ปลั๊กอิน Draggable และ ThrowProps ของ GreenSock ใช้สำหรับการควบคุมแถบเลื่อน
สร้างโดยเครก โรโบลวสกี้
17 เมษายน 2017

ใช้อินพุตช่วงที่กำหนดเองสำหรับแถบเลื่อน
สร้างโดยดัดลีย์ชั้น
14 ตุลาคม 2559

แถบเลื่อนการเปรียบเทียบภาพที่ตอบสนองด้วย HTML, CSS และ JavaScript
สร้างโดย Ege Görgülü
3 สิงหาคม 2559

แถบเลื่อนเปรียบเทียบวิดีโอ HTML5, CSS3 และ JavaScript ก่อนและหลัง
สร้างโดยดัดลีย์ชั้น
24 เมษายน 2559

แถบเลื่อนแบบลากได้สะดวกเพื่อเปรียบเทียบ 2 รูปภาพอย่างรวดเร็ว ขับเคลื่อนโดย CSS3 และ jQuery
สร้างโดยโคดี้เฮาส์
15 กันยายน 2014

แถบเลื่อนแบบเต็มหน้าจอ

เกี่ยวกับรหัส

แถบเลื่อนอย่างง่ายตามอินพุตวิทยุ HTML + CSS บริสุทธิ์ 100% ใช้งานได้กับปุ่มลูกศร

ตอบสนอง: ใช่

การพึ่งพา: -

เกี่ยวกับรหัส

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

เกี่ยวกับรหัส

ตัวเลื่อนเลื่อนพารัลแลกซ์แนวนอนพร้อม Swiper.js

เกี่ยวกับรหัส

แถบเลื่อนมุมมอง 3 มิติที่ตอบสนองได้อย่างราบรื่นเมื่อเลื่อนเมาส์

แถบเลื่อนรูปภาพฮีโร่แบบเต็มหน้าจอ (ธีมแผงการปัดนิ้ว) พร้อม HTML, CSS และ JavaScript
สร้างโดยโทเบียส โบกลิโอโล
25 มิถุนายน 2017

การโต้ตอบของแถบเลื่อนโดยใช้เอฟเฟกต์ Velocity และ Velocity (UI Pack) เพื่อปรับปรุงแอนิเมชั่น ภาพเคลื่อนไหวถูกทริกเกอร์โดยใช้ปุ่มลูกศร การคลิกนำทาง หรือแจ็คเลื่อน เวอร์ชันนี้มีเส้นขอบเป็นส่วนหนึ่งของการโต้ตอบ
สร้างโดย Stephen Scaff
11 พฤษภาคม 2017

แถบเลื่อนเรียบง่ายในสไตล์มินิมอลเพื่ออวดรูปภาพ ส่วนหนึ่งของรูปภาพปรากฏขึ้นในแต่ละสไลด์
สร้างโดยนาธานเทย์เลอร์
22 มกราคม 2017

สิ่งนี้ค่อนข้างง่ายในการปรับแต่ง คุณสามารถเปลี่ยนแบบอักษร ขนาดแบบอักษร สีแบบอักษร ความเร็วของภาพเคลื่อนไหวอย่างปลอดภัย ตัวอักษรตัวแรกของสตริงใหม่ในอาร์เรย์ใน JS จะปรากฏบนสไลด์ใหม่ ง่ายต่อการสร้าง (หรือลบ) สไลด์ใหม่: 1. เพิ่มเมืองใหม่ในอาร์เรย์ใน JS 2. เปลี่ยนจำนวนตัวแปรสไลด์และวางรูปภาพใหม่ในรายการ scss ใน CSS
สร้างโดยรุสลัน พิโววารอฟ
8 ตุลาคม 2559

1. เส้นทางคลิปสำหรับการมาสก์ขอบสี่เหลี่ยมผืนผ้าสำหรับรูปภาพ (เฉพาะ webkit)
2. โหมดผสมผสานสำหรับมาส์กนี้
3. ระบบสีอัจฉริยะ เพียงใส่ชื่อสีและค่าของคุณลงใน sass map จากนั้นเพิ่มคลาสที่เหมาะสมด้วยชื่อสีนี้ให้กับองค์ประกอบต่างๆ แล้วทุกอย่างจะได้ผล!
4. เมนูด้านข้างเครดิตสุดเจ๋ง (คลิกปุ่มเล็ก ๆ ที่อยู่ตรงกลางของการสาธิต)
5. วานิลลา js ด้วยเพียง< 200 lines of code (basically it’s just adds/removes classes).

ตัวเลื่อนแบบเอียงพร้อมการเลื่อนตาม JS และ CSS ล้วนๆ (ไม่มีไลบรารี)
สร้างโดยวิกเตอร์ เบโลซีรอฟ
3 กันยายน 2559

แอนิเมชั่นตัวเลื่อนพร้อมการออกแบบโปเกมอน
สร้างโดย ฟาม มิคุน
18 สิงหาคม 2559

แถบเลื่อน HTML, CSS และ JavaScritp พร้อมภาพเคลื่อนไหวที่ซับซ้อนและข้อความมุมครึ่งสี
สร้างโดยรุสลัน พิโววารอฟ
13 กรกฎาคม 2559

เอฟเฟกต์พารัลแลกซ์ของ Slider พร้อม HTML, CSS และ JavaScript
สร้างโดยมานูเอลมาเดรา
28 มิถุนายน 2559

แถบเลื่อน HTML, CSS และ JavaScript พร้อมเอฟเฟกต์ระลอกคลื่น
สร้างโดยเปโดรคาสโตร
21 พฤษภาคม 2559

Clip-Path เปิดเผยแถบเลื่อนด้วย HTML, CSS และ JavaScript
สร้างโดยนิโคไล ทาลานอฟ
16 พฤษภาคม 2559

GSAP + ตัวเลื่อนเนียนพร้อมการแสดงตัวอย่างสไลด์ก่อนหน้า/ถัดไป
สร้างโดยคาร์โล วิเด็ค
27 เมษายน 2559

แถบเลื่อนแบบเต็มหน้า HTML, CSS และ JavaScript
สร้างโดยโจเซฟ มาร์ตุชชี
28 กุมภาพันธ์ 2559

ต้นแบบตัวเลื่อนแบบเต็มพร้อม HTML, CSS และ JavaScript
สร้างโดยกลูเบอร์ ซัมปาโย
6 มกราคม 2559

สไลด์โชว์แบบเต็มหน้าจอที่ตอบสนองด้วยภาพเคลื่อนไหวด้วย Greensocks TweenLite/Tweenmax
สร้างโดยอาร์เดน
12 ธันวาคม 2558

แถบเลื่อนแบบเต็มหน้าจอ (ไทม์ไลน์ GSAP) #1 พร้อม HTML, CSS และ JavaScript
สร้างโดย Diaco M.Lotfollahi
23 พฤศจิกายน 2558

แถบเลื่อน HTML และ CSS พร้อมเอฟเฟกต์แบบกำหนดเอง
สร้างโดยนิโคไล ทาลานอฟ
12 พฤศจิกายน 2558

ตัวเลื่อนลากเต็มหน้าจอพร้อมพารัลแลกซ์พร้อม HTML, CSS และ JavaScript
สร้างโดยนิโคไล ทาลานอฟ
12 พฤศจิกายน 2558

พิสูจน์แนวคิดของแถบเลื่อนแบบหมุนได้ ใช้คลิปพาธและคณิตศาสตร์มากมาย
สร้างโดยไทเลอร์จอห์นสัน
16 เมษายน 2558

CSS แบบเต็มหน้าจอที่เรียบง่าย & แถบเลื่อน jQueryใช้ความราบรื่นของ TranslateX และ Translate3D!
สร้างโดยโจเซฟ
19 สิงหาคม 2557

แถบเลื่อนที่ตอบสนอง

เกี่ยวกับรหัส

ตัวเลื่อนความทึบของรูปภาพ

แถบเลื่อนความทึบของรูปภาพใน HTML และ CSS

เบราว์เซอร์ที่รองรับ: Chrome, Edge, Firefox, Opera, Safari

ตอบสนอง: ใช่

การพึ่งพา: -

เกี่ยวกับรหัส

เค้าโครงสไลด์ที่ยืดหยุ่นแบบเรียงซ้อน

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

เบราว์เซอร์ที่รองรับ: Chrome, Edge, Firefox, Opera, Safari

ตอบสนอง: ใช่

การพึ่งพา: -

เกี่ยวกับรหัส

แถบเลื่อนที่ตอบสนอง

แถบเลื่อนตอบสนองแบบเคลื่อนไหวใน HTML, CSS และ JavaScript

เบราว์เซอร์ที่รองรับ: Chrome, Edge, Firefox, Opera, Safari

ตอบสนอง: ใช่

การพึ่งพา: animate.css

เกี่ยวกับรหัส

ตัวเลื่อนพร้อมข้อความที่สวมหน้ากาก

แถบเลื่อน CSS เท่านั้นที่มีข้อความที่ปกปิด

เบราว์เซอร์ที่รองรับ: Chrome, Edge (บางส่วน), Firefox, Opera, Safari

ตอบสนอง: ใช่

การพึ่งพา: -

เกี่ยวกับรหัส

รูปภาพและเนื้อหาพร้อมเอฟเฟกต์พารัลแลกซ์

เกี่ยวกับรหัส

CSS แกลเลอรีสไลด์เท่านั้น

เบราว์เซอร์ที่รองรับ: Chrome, Edge, Firefox, Opera, Safari

ตอบสนอง: ใช่

การพึ่งพา: -

เกี่ยวกับรหัส

ตัวเลื่อน HTML/CSS ล้วนๆ

แถบเลื่อน HTML/CSS ล้วนๆ พร้อมแถบความคืบหน้า SVG แบบวงกลม

เบราว์เซอร์ที่เข้ากันได้: Chrome, Edge (บางส่วน), Firefox (บางส่วน), Opera, Safari

ตอบสนอง: ใช่

การพึ่งพา: font-awesome.css

เกี่ยวกับรหัส

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

เกี่ยวกับรหัส

ตัวเลื่อน/ภาพหมุน Flexbox แบบง่ายๆ ที่สร้างด้วย JavaScript วานิลลา

เกี่ยวกับรหัส

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

เกี่ยวกับรหัส

แถบเลื่อนภาพเคลื่อนไหวสุดเจ๋งด้วย JS

เกี่ยวกับรหัส

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

สำรวจการเปลี่ยนผ่านของแถบเลื่อน แถบเลื่อน Swiper พร้อมเปิดใช้งานตัวเลือกพารัลแลกซ์ เล่นกับตัวกรอง CSS ส่วนใหญ่ที่นี่
สร้างโดย Mirko Zorić
12 มิถุนายน 2017

แถบเลื่อน GSAP แบบธรรมดาพร้อมแอนิเมชั่นทวีตเล็กๆ น้อยๆ
สร้างโดย Goran Vrban
9 มิถุนายน 2017

Slider UI พร้อม HTML, CSS และ JavaScript
สร้างโดย Mergim Ujkani
6 มิถุนายน 2017

สไลเดอร์ GSAP เวอร์ชัน 2
สร้างโดยเอมอัน
4 พฤษภาคม 2017

แถบเลื่อนการเปลี่ยนแปลงแบบแบ่งส่วนเล็กๆ โดยใช้ข้อตกลงเพิ่มคลาสแบบง่ายๆ ต้องปรับเวลาให้ราบรื่นขึ้นเล็กน้อยและตัดสินใจเลือกแนวทางที่ดีที่สุดสำหรับมือถือ (เพียงแค่สแต็ก เพิ่มกิจกรรมการสัมผัส ทำให้รูปภาพเต็มวิวพอร์ต ฯลฯ รองรับ scrollwheel (scroll jacking) ปุ่มนำทาง และปุ่มลูกศร นอกจากนี้ยังสามารถเพิ่ม wrapper เนื้อหาได้อีกด้วย เพื่อให้รูปภาพเติมเต็มวิวพอร์ตในสถานะไม่มีภาพเคลื่อนไหว ซึ่งก็ค่อนข้างดีเช่นกัน
สร้างโดย Stephen Scaff
3 มกราคม 2017

ใช้ประโยชน์จากเส้นขอบรูปภาพและเส้นทางคลิป CSS เพื่อสร้างเอฟเฟกต์ภาพเคลื่อนไหวแบบเลื่อน
สร้างโดยเอมิลี่เฮย์แมน
31 ธันวาคม 2559

สไลเดอร์ตัวเล็กที่สร้างด้วย flexbox ค่อนข้างตอบสนองและสามารถมีองค์ประกอบคงที่ข้างบริเวณแถบเลื่อนได้
ทำโดยโรเบิร์ต
28 พฤศจิกายน 2559

ตัวเลื่อนผ้าใบ HTML, CSS
สร้างโดย Nvagelis
29 ตุลาคม 2559

ตัวเลื่อน 3 มิติที่ราบรื่นของ HTML, CSS และ JavaScript
สร้างโดยเอดูอาร์โด้ อัลเลกรีนี
19 ตุลาคม 2559

ตัวเลื่อนคัพเค้ก HTML และ CSS พร้อมโรย!
สร้างโดยเจมี่โคลเตอร์
14 ตุลาคม 2559

สร้างโดยมาริโอ มาเซลี
12 ตุลาคม 2559

สำรวจภาพเคลื่อนไหว UI #2 ด้วย HTML, CSS และ JavaScript
สร้างโดยมาริโอ มาเซลี
22 กันยายน 2559

สำรวจภาพเคลื่อนไหว UI #3 ด้วย HTML, CSS และ JavaScript
สร้างโดยมาริโอ มาเซลี
22 กันยายน 2559

Ecommerce Slider v2.0 พร้อม HTML, CSS และ JavaScript
สร้างโดยเปโดรคาสโตร
17 กันยายน 2559

ตัวเลื่อนสะอาด HTML, CSS และ JavaScript พร้อมพื้นหลังโค้ง
สร้างโดยรุสลัน พิโววารอฟ
13 กันยายน 2559

สำรวจภาพเคลื่อนไหว UI #1 ด้วย HTML, CSS และ JavaScript
สร้างโดยมาริโอ มาเซลี
8 กันยายน 2559

เพลิดเพลินไปกับพลังของ CSS: ขึ้นและลงแต่ละภาพตรงกลางและแถบเลื่อนแบบแบ่งหน้าพร้อมไลท์บ็อกซ์
สร้างโดย Kseso
15 สิงหาคม 2559

การเปิดรับแสงซ้อนเป็นเทคนิคการถ่ายภาพที่รวมภาพ 2 ภาพที่แตกต่างกันให้เป็นภาพเดียว
สร้างโดย มิซากิ นากาโนะ
3 สิงหาคม 2559

ตัวเลื่อนโดยใช้คลิปคุณสมบัติ CSS3
สร้างโดยเปโดรคาสโตร
1 พฤษภาคม 2559

แถบเลื่อน CSS ที่ตอบสนอง
สร้างโดย geekwen
19 เมษายน 2559

นี่เป็นการทดลองแบบแถบเลื่อนง่ายๆ ที่แสดงคำที่มีความหมายสวยงามซึ่งไม่สามารถแปลโดยตรงได้ โฟกัส: การออกแบบตัวอักษรที่หรูหราและการเปลี่ยนผ่านที่เรียบง่ายแต่มีเสน่ห์
สร้างโดยโจแฮร์รี่
5 เมษายน 2559

แนวคิดแอนิเมชันคือการเปลี่ยนค่าของเส้นทางคลิป CSS ดังนั้นจึงสร้างเอฟเฟกต์การมาสก์
สร้างโดยภักติอัลอัคบาร์
31 มีนาคม 2559

ตัวเลื่อน Dot พร้อม HTML, CSS และ JavaScript
สร้างโดย Derek Nguyen
16 มีนาคม 2559

แถบเลื่อนเอฟเฟกต์ปริซึมพร้อม HTML, CSS และ JavaScript
สร้างโดยผู้ชนะ
12 มีนาคม 2559

แกลเลอรีพื้นหลังแบบเลื่อนด้วย HTML, CSS และ JavaScript
สร้างโดยรอน เกียร์ลาค
30 พฤศจิกายน 2558

โซลูชันตัวเลื่อน HTML, CSS และ JavaScript
สร้างโดยเจอร์เก้น เกนเซอร์
30 กันยายน 2558

แถบเลื่อนผลิตภัณฑ์ที่ขับเคลื่อนโดย Sequence.js Sequence.js - เฟรมเวิร์กภาพเคลื่อนไหว CSS ที่ตอบสนองสำหรับการสร้างแถบเลื่อน การนำเสนอ แบนเนอร์ และแอปพลิเคชันแบบขั้นตอนอื่นๆ ที่ไม่ซ้ำใคร
สร้างโดยเอียน ลุนน์
15 กันยายน 2558

แถบเลื่อนปรับแต่งวงกลมเล็ก ๆ
สร้างโดย Bram de Haan
11 สิงหาคม 2558

แถบเลื่อน GTA V ที่ตอบสนองด้วย HTML, CSS และ JavaScript
สร้างโดยเอดูอาร์ดเมเยอร์
24 มกราคม 2014

มันเหมือนกับสไลเดอร์แต่มันหมุนเป็นลูกบาศก์โดยไม่ทราบสาเหตุ
สร้างโดยเอริค บริวเวอร์
4 ธันวาคม 2556

สร้างโดยฮิวโก้ ดาร์บี้ บราวน์
28 สิงหาคม 2556

สไลเดอร์ธรรมดา

แถบเลื่อนภาพซ้อนทับพร้อม HTML, CSS และ vanilla JavaScript
สร้างโดยยูกัม
7 มิถุนายน 2017

แถบเลื่อนรูปภาพเด่น HTML และ CSS
สร้างโดยโจชัวฮิบเบิร์ต
16 มิถุนายน 2559

ตัวเลื่อนรูปภาพแบบหลายแกน

แถบเลื่อนรูปภาพหลายแกนพร้อม HTML, CSS และ JavaScript
สร้างโดย Burak Can
22 กรกฎาคม 2556

แถบเลื่อนคิวบ์ การทดลองขนาดเล็กกับการแปลง HTML5/CSS3 3 มิติ
สร้างโดย Ilya K.
26 มิถุนายน 2556

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

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

2. ตัวเลื่อนบน Glide.js

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

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

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

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

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

5. ตัวเลื่อนการเปลี่ยนภาพ

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

6. แถบเลื่อนแบบวงกลม

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

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

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

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

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

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

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

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

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

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

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

12. กรอบรูป

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

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

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

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

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

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

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

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

17. ยางยืด

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

18.กรีด

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

กำลังทำหนังสือเกี่ยวกับ เจคิวรี่ฉันต้องเผชิญกับความจริงที่ว่าสมาชิกหลายคนขอให้ฉันบอกวิธีการเขียนสคริปต์ตัวเลื่อนใน jquery ขออภัยเพื่อนรัก! นี่คือศตวรรษที่ 21 และโชคดีสำหรับเราที่พอใจกับ CSS3 ทั้งหมดที่มีให้สำหรับเรา ทำให้เราสามารถนำสิ่งเหล่านี้ไปใช้ได้โดยไม่ต้องมีบรรทัดเดียว จาวาสคริปต์.

ส่วนที่ 1.

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

แน่นอนคุณอาจสงสัยว่า: เหตุใดจึงต้องสร้างวงล้อขึ้นมาใหม่หากมีการใช้งานตัวเลื่อนมากมายในจาวาสคริปต์ นี่คือข้อโต้แย้งของฉัน:

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

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

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

เพื่อความสะดวก ความกว้างคือ 80% ของหน้าต่าง และความกว้างสูงสุดคือขนาดของรูปภาพแต่ละรูป (1,000px ในตัวอย่างของเรา) เนื่องจากเราไม่ต้องการให้รูปภาพถูกขยาย:

ตัวเลื่อน ( ความกว้าง: 80%; ความกว้างสูงสุด: 1,000px; )

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

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

เราจำเป็นต้องแบ่งภาพถ่ายภายในแถบภาพเท่าๆ กัน สูตรนั้นง่ายมาก: หากเราถือว่าความกว้างของรูปภาพคือ 100% แต่ละรูปภาพควรใช้พื้นที่ 1/5 ของพื้นที่แนวนอน:

มีความจำเป็นต้องใช้กฎ CSS ต่อไปนี้:

แถบรูปภาพ img (กว้าง: 20%; สูง: อัตโนมัติ; )

ตอนนี้เรามาเปลี่ยนคุณสมบัติโอเวอร์โฟลว์สำหรับ div:

ตัวเลื่อน ( กว้าง: 80%; ความกว้างสูงสุด: 1,000px; ล้น: ซ่อนอยู่ )

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

@keyframes เลื่อน ( 20% ( ซ้าย: 0%; ) 25% ( ซ้าย: -100%; ) 45% ( ซ้าย: -100%; ) 50% ( ซ้าย: -200%; ) 70% ( ซ้าย: -200 %; ) 75% ( ซ้าย: -300%; ) 95% ( ซ้าย: -300%; ) 100% ( ซ้าย: -400%; ) )

รูปภาพแต่ละรูปบนแถบเลื่อนจะอยู่ใน div และจะเคลื่อนที่ไป 5%

รูปตัวเลื่อน ( ตำแหน่ง: สัมพันธ์; ความกว้าง: 500%; แอนิเมชั่น: 30s เลื่อนไม่สิ้นสุด; ขนาดตัวอักษร: 0; ช่องว่างภายใน: 0; ระยะขอบ: 0; ซ้าย: 0; )

ส่วนที่ 2

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

ดังนั้นโค้ด HTML ของเรา:

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

/* สำหรับแถบเลื่อนสองสไลด์ */ @keyframes slider__item-autoplay_count_2 ( 0%(opacity:0;) 20%(opacity:1;) 50%(opacity:1;) 70%(opacity:0;) 100% ( ความทึบ:0;) ) /* สำหรับแถบเลื่อนสามสไลด์ */ @keyframes slider__item-autoplay_count_3 ( 0%(ความทึบ:0;) 10%(ความทึบ:1;) 33% (ความทึบ:1;) 43% ( ความทึบ: 0;) 100%(ความทึบ:0;) ) /* สำหรับแถบเลื่อนสี่สไลด์ */ @keyframes slider__item-autoplay_count_4 ( 0%(ความทึบ:0;) 8% (ความทึบ:1;) 25% (ความทึบ :1; ) 33% (ความทึบ:0;) 100%(ความทึบ:0;) ) /* สำหรับแถบเลื่อนห้าสไลด์ */ @keyframes slider__item-autoplay_count_5 ( 0%(ความทึบ:0;) 7% (ความทึบ: 1;) 20 %(ความทึบ:1;) 27% (ความทึบ:0;) 100%(ความทึบ:0;) )

เศร้าใช่มั้ยล่ะ? นอกจากนี้อย่าลืมว่าสำหรับ Opera, Chrome, IE และ Mozilla คุณต้องเขียนทุกอย่างเหมือนกัน แต่มีคำนำหน้าที่เหมาะสม ตอนนี้เรามาเขียนโค้ดเพื่อทำให้สไลด์ของเราเคลื่อนไหว (ต่อไปนี้จะแสดงโค้ดสำหรับสามสไลด์ คุณสามารถดูโค้ดสำหรับไซต์เพิ่มเติมได้ในโค้ดตัวอย่าง):

Slider_count_3 .item ( -moz-animation: slider__item-autoplay_count_3 15 วินาทีไม่มีที่สิ้นสุด; -webkit-animation: slider__item-autoplay_count_3 15 วินาทีไม่มีที่สิ้นสุด; -o-animation: slider__item-autoplay_count_3 15 วินาทีไม่มีที่สิ้นสุด; ภาพเคลื่อนไหว: slider__item-autoplay_count_3 15 วินาทีไม่มีที่สิ้นสุด; ) .item :nth -of-type(2) ( -moz-animation-delay:5s; -webkit-animation-delay:5s; -o-animation-delay:5s; Animation-delay:5s; ) .item:nth-of-type (3) ( -moz-animation-delay:10s; -webkit-animation-delay:10s; -o-animation-delay:10s; ภาพเคลื่อนไหว-delay:10s; )

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

Slider:hover .item ( -moz-animation-play-state: Paused; -webkit-animation-play-state: Paused; -o-animation-play-state: Paused; Animation-play-state: Paused; )

ในที่สุด เราก็ต้องสลับสไลด์ของเรา อย่างที่คุณทราบ มีเหตุการณ์จำนวนหนึ่งที่ให้คุณเปลี่ยนคุณสมบัติขององค์ประกอบได้เมื่อใด ความช่วยเหลือเกี่ยวกับ CSS. สำหรับการคลิกเมาส์ คลาสหลอก :focus, :target หรือ :checked บนหนึ่งในองค์ประกอบของหน้าสามารถช่วยเราได้ คลาสหลอก :focus สามารถมีได้เพียงหนึ่งองค์ประกอบต่อหน้า :target จะอุดตันประวัติเบราว์เซอร์และจำเป็นต้องมีแท็ก pseudo-class:checked จะจดจำสถานะก่อนออกจากเพจ และในกรณีของปุ่มตัวเลือก จะสามารถเลือกได้เพียงองค์ประกอบเดียวในกลุ่มเท่านั้น มาใช้ประโยชน์จากสิ่งนี้กันเถอะ ใส่ก่อน