เราสามารถสร้างสไลเดอร์เลื่อนได้ไม่สิ้นสุดโดยใช้ CSS Flexbox ร่วมกับ JavaScript
ตัวอย่างที่ 1: แคโรเซลพื้นฐาน
<!DOCTYPE html> <html> <head> <style> img { width: 100%; } .container { max-width: 600px; position: relative; margin: 6% auto; } .prevbtn, .nextbtn { position: absolute; top: 50%; padding: 12px; margin-top: -20px; color: white; font-weight: bold; cursor: pointer; transition: 0.2s ease-in; border-radius: 50%; } .prevbtn:hover, .nextbtn:hover { background-color: darkgrey; color: rgb(0,0,0); } .nextbtn { right: 0; } </style> </head> <body> <div class="container"> <div class="slide"> <img src="https://images.unsplash.com/photo-1609517904792-bac493d55556?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" /> </div> <div class="slide"> <img src="https://images.unsplash.com/photo-1609883475382-c4c9378569e5?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" /> </div> <div class="slide"> <img src="https://images.unsplash.com/photo-1610258648552-fe6407d664a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" /> </div> <div class="slide"> <img src="https://images.unsplash.com/photo-1610258648552-fe6407d664a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" /> </div> <div class="slide"> <img src="https://images.unsplash.com/photo-1611094607507-8c8173e5cf33?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" /> </div> <a class="prevbtn" onclick="changeSlide(-1)">❮</a> <a class="nextbtn" onclick="changeSlide(1)">❯</a> </div> <script> let slideIndex = [1,1]; viewSlides(1); function changeSlide(n) { viewSlides(slideIndex[0] += n); } function viewSlides(n) { let ele = document.getElementsByClassName("slide"); if (n > ele.length) { slideIndex[0] = 1 } if (n < 1) { slideIndex[0] = ele.length } for (i = 0; i < ele.length; i++) { ele[i].style.display = "none"; } ele[slideIndex[0]-1].style.display = "block"; } </script> </body> </html>
ตัวอย่างที่ 2: สไลเดอร์เลื่อนอัตโนมัติแบบวนซ้ำ
<!DOCTYPE html> <html> <head> <style> .container { height: 120px; max-width: 600px; margin: 12px auto; position: relative; overflow: hidden; transform: translate3d(0, 0, 0); border: 4px ridge rgba(20,30,240,0.6); } .container > div { height: 120px; width: 2400px; background: url(https://images.unsplash.com/photo-1611485916153-fce531587fe0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb-1.2.1&q=80&w=120); position: absolute; height: 100%; transform: translate3d(0, 0, 0); } .container .slider { animation: slideshow 20s linear infinite; } @keyframes slideshow { 100% { transform: translateX(-33.33%); } } </style> </head> <body> <div class="container"> <div class="slider"></div> </div> </body> </html>
ตัวอย่างที่สองใช้ CSS Animation เพื่อสร้างการเลื่อนแบบต่อเนื่องไม่ต้องใช้ JavaScript เหมาะสำหรับแบนเนอร์หรือแกลเลอรี่ภาพที่ต้องการเลื่อนอัตโนมัติ
