ภาพสไลด์ด้วย CSS

Adam Argyle

เผยแพร่: 20 มีนาคม 2025

ตั้งแต่ Chrome 135 เป็นต้นไป คุณสามารถใช้ฟีเจอร์จากข้อกำหนด CSS Overflow 5 ที่ออกแบบมาเพื่อสร้างประสบการณ์การเลื่อนและภาพสไลด์ได้

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

วิดีโอนี้แสดงปุ่มเลื่อน เครื่องหมายเลื่อน ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน การค้นหา scroll-state() ฟังก์ชัน :has(), กริด แองเคอร์ และอื่นๆ อีกมากมาย

และที่น่าประทับใจยิ่งกว่าคือเรื่องราวเกี่ยวกับการช่วยเหลือพิเศษ

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

พบกับ ::scroll-button() และ ::scroll-marker()

ภาพสไลด์คือพื้นที่เลื่อนที่มีองค์ประกอบ UI เพิ่มเติมได้สูงสุด 2 รายการ ได้แก่ ปุ่มและเครื่องหมาย

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

• ปุ่มเลื่อน
  องค์ประกอบการเลื่อนแบบอินเทอร์แอกทีฟที่มีสถานะและมีให้ในเบราว์เซอร์ <button> ซึ่งช่วยในการเข้าถึงเนื้อหาและเลื่อน 85% ของพื้นที่เลื่อนเมื่อกด

• เครื่องหมายการเลื่อน
  องค์ประกอบการนำทางแบบมีสถานะที่เบราว์เซอร์จัดให้ <a> ซึ่งช่วยในการเข้าถึงเนื้อหาสำหรับรายการที่ขอในพื้นที่เลื่อน

ส่วนที่เหลือของโพสต์นี้จะแสดงวิธีสร้างภาพสไลด์โดยใช้ฟีเจอร์ใหม่เหล่านี้

เริ่มต้นด้วยแถบเลื่อน

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

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

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}

เพิ่มปุ่มเลื่อนด้วย ::scroll-button()

ระบบปฏิบัติการของคุณอาจมีปุ่มเลื่อนอยู่รอบๆ แถบเลื่อนอยู่แล้ว ปุ่มแถบเลื่อนในตัวมักจะเลื่อนพื้นที่เลื่อนเล็กน้อย ในขณะที่ปุ่มเลื่อน CSS จะเลื่อนพื้นที่เลื่อน 85%

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

วิธีเพิ่มปุ่มเลื่อนด้วย CSS

1. เพิ่มเหมือนองค์ประกอบเสมือนอื่นๆ ด้วยตัวเลือก: .carousel::scroll-button(right) สำหรับปุ่มเลื่อนไปทางขวา
2. ระบุ content พร้อมข้อความแสดงแทนสำรองที่เข้าถึงได้ (ไม่บังคับ)

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

.carousel {
  …

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  &::scroll-button(*):focus-visible {
    outline-offset: 5px;
  }
}

เพิ่มเครื่องหมายเลื่อนด้วย ::scroll-marker()

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

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

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

เครื่องหมายจะคล้ายกับลิงก์ <a> ในหน้าเว็บ แต่มีฟีเจอร์พิเศษบางอย่างดังนี้

1. โดยจะมี:target-currentสถานะเมื่อเครื่องหมายอยู่ในมุมมองหรือสแนป
2. รวมถึงการไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ และทำงานเหมือนกลุ่มโฟกัส
3. รวมถึงประสบการณ์การใช้งานโปรแกรมอ่านหน้าจอ และรายงาน เช่น รายการแท็บ

เพิ่มเครื่องหมายไปยังจุดที่น่าสนใจในแถบเลื่อนโดยทำตามขั้นตอนต่อไปนี้

1. กำหนดตำแหน่งของ scroll-marker-group เป็น before หรือ after
2. เลือกจุดที่น่าสนใจด้วยเครื่องมือเลือก .carousel .point-of-interest::scroll-marker
3. ระบุ content พร้อมข้อความแสดงแทนสำรองที่เข้าถึงได้ (ไม่บังคับ), ตัวเลข, ข้อความ, ว่างเปล่า หรือรูปภาพ

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

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
  }

  > li::scroll-marker:target-current {
    background: var(--accent);
  }
}

องค์ประกอบที่บรรจุเครื่องหมายเรียกว่า ::scroll-marker-group และจะสร้างเป็นองค์ประกอบระดับเดียวกันกับตัวเลื่อน เช่นเดียวกับปุ่มเลื่อน คุณจัดรูปแบบและวางคอนเทนเนอร์นี้ได้ทุกที่ที่ต้องการ

เครื่องหมายและปุ่มพร้อมกัน

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

• ใช้งานได้เมื่อปิดใช้ JavaScript
• ไม่มีการไฮเดรตหรือการกำหนดขนาดแบบเลซี่ (ลด CLS)
• พร้อมสําหรับภาพเคลื่อนไหวและการเรียกใช้การเลื่อนทุกประเภท
• รวมการช่วยเหลือพิเศษ
• ใช้งานได้กับระบบสัมผัส เมาส์ และแป้นพิมพ์

ทำน้อยลง เข้าถึงได้มากขึ้นและเร็วขึ้น

แหล่งข้อมูล

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

• มาตรฐานเว็บ
  • CSS Overflow 5
  • คำอธิบายภาพสไลด์
  • WAI Aria Carousel
• Chrome
  • ความตั้งใจที่จะจัดส่ง
  • แกลเลอรีภาพสไลด์
  • เครื่องมือกำหนดค่าภาพสไลด์

เครื่องมือกำหนดค่าภาพสไลด์

สำหรับผู้เรียนที่ชอบการเรียนรู้แบบเห็นภาพและแบบอินเทอร์แอกทีฟ ให้ลองใช้เครื่องมือกำหนดค่าภาพสไลด์

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

นอกจากนี้ ยังมีตัวอย่างแนวคิดขั้นสูงเพิ่มเติมที่อยู่ติดกับภาพสไลด์ด้วย

• การโต้ตอบ
• scroll-state
• ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน
• และคอลัมน์การเลื่อนสแนป

แกลเลอรีภาพหมุน

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

ข้อเท็จจริงที่น่าสนใจคือทั้งเว็บไซต์ไม่มี JavaScript

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

งานเพิ่มเติม

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

นำองค์ประกอบของคุณเองมาใช้

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

การเลื่อนแบบวนซ้ำ

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

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

คุณทำน้อยลง ประสบการณ์ของผู้ใช้ยอดเยี่ยม ประสิทธิภาพดีขึ้น