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

Adam Argyle

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

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

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

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

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

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

ภาพหน้าจอของภาพสไลด์โครงสร้างการช่วยเหลือพิเศษใน Chrome DevTools - สาธิต

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

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

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

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

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

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

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

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

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

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

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

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

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

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

หมายเหตุ: หากต้องการให้ปุ่มย้ายทีละรายการเท่านั้น ให้ใช้ scroll-snap-type: x mandatory ร่วมกับ scroll-snap-stop: always ในรายการย่อยของ Snap แต่ละรายการ

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

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

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

.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. มีการนําทางด้วยแป้นพิมพ์รวมอยู่ด้วย และทํางานเหมือน focusgroup
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: ' ';
    
    &:target-current {
      background: var(--accent);
    }
  }
}

เดโม

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

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

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

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

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

สาธิต

แหล่งข้อมูล

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

• มาตรฐานเว็บ
  • CSS Overflow 5
  • Carousel Explainer
  • ภาพสไลด์ WAI Aria
• Chrome
  • Intent to Ship
  • แกลเลอรีภาพสไลด์
  • เครื่องมือกําหนดค่าภาพสไลด์

Carousel Configurator

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

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

https://chrome.dev/carousel-configurator/

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

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

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

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

สาระน่ารู้คือทั้งเว็บไซต์ไม่มี JavaScript

https://chrome.dev/carousel/

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

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

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

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

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

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

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

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

ลดความซับซ้อนของงาน มอบประสบการณ์การใช้งานที่ยอดเยี่ยม และประสิทธิภาพที่ดียิ่งขึ้น