home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

วิธีสร้าง Responsive Slideshow Gallery (แกลเลอรี่สไลด์โชว์) ด้วย CSS และ JavaScript

สร้าง Slideshow/Gallery พร้อม Thumbnail Navigation, Prev/Next Buttons, Captions และ Responsive Design ใช้ Vanilla JavaScript

ตัวอย่างโค้ด

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> * {    box-sizing: border-box; } .Slide {    display: none; } img {    vertical-align: middle;    width: 100%;    height: 400px; } .slideContainer {    max-width: 600px;    position: relative;    margin: auto; } .prevBtn, .nextBtn {    cursor: pointer;    position: absolute;    top: 50%;    width: auto;    padding: 10px;    background-color: rgb(255, 255, 75);    color: rgb(50, 0, 116);    font-weight: bolder;    font-size: 18px; } .nextBtn {    right: 0; } .Caption {    color: #fbff09;    font-weight: bold;    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    font-size: 25px;    padding: 8px 12px;    position: absolute;    bottom: 8px;    width: 100%;    text-align: center; } .thumbnail:after {    content: "";    display: table;    clear: both; } .thumbnail{    margin-left: 32%; } .imageCol {    float: left;    width: 16.66%; } .thumbImage{    height: 150px;    width: 150px; } @media only screen and (max-width: 450px) {    .prevBtn,    .nextBtn,    .Caption {       font-size: 16px;    } } </style> </head> <body> <div class="slideContainer"> <div class="Slide"> <img src="https://images.pexels.com/photos/3540375/pexels-photo-3540375.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" /> <div class="Caption">Photo 1</div> </div> <div class="Slide"> <img src="https://images.unsplash.com/photo-1558981001-5864b3250a69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" /> <div class="Caption">Photo 2</div> </div> <div class="Slide"> <img src="https://images.unsplash.com/photo-1584910758141-f7993f9e203d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80" /> <div class="Caption">Photo 3</div> </div> <a class="prevBtn"></a> <a class="nextBtn"></a> </div> <br /> <div class="thumbnail"> <div class="imageCol"> <img class="thumbImage" src="https://images.pexels.com/photos/3540375/pexels-photo-3540375.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" style="width:100%" onclick="setSlide(1)" alt="The Woods"> </div> <div class="imageCol"> <img class="thumbImage" src="https://images.unsplash.com/photo-1558981001-5864b3250a69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" style="width:100%" onclick="setSlide(2)" alt="Cinque Terre"> </div> <div class="imageCol"> <img class="thumbImage" src="https://images.unsplash.com/photo-1584910758141-f7993f9e203d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80" style="width:100%" onclick="setSlide(3)" alt="Mountains and fjords"> </div> </div> </div> <script> function setSlide(number){    clearSelected();    currentSlide(number);    document.querySelectorAll('.thumbImage')[number-1].style.borderBottom = "6px solid purple"; } function clearSelected(){    Array.from(document.querySelectorAll('.thumbImage')).forEach(item=>item.style.borderBottom=""); } document.querySelector(".prevBtn").addEventListener("click", () => {    changeSlides(-1); }); document.querySelector(".nextBtn").addEventListener("click", () => {    changeSlides(1); }); var slideIndex = 1; showSlides(slideIndex); function changeSlides(n) {    showSlides((slideIndex += n)); } function currentSlide(n) {    showSlides((slideIndex = n)); } function showSlides(n) {    var i;    var slides = document.getElementsByClassName("Slide");    if (n > slides.length) {       slideIndex = 1;    }    if (n < 1) {       slideIndex = slides.length;    }    Array.from(slides).forEach(item => (item.style.display = "none"));    slides[slideIndex - 1].style.display = "block"; } </script> </body> </html>

คุณสมบัติ

  • Prev/Next Navigation (ปุ่มสามเหลี่ยม)
  • Thumbnail Navigation (คลิกเลื่อนไปสไลด์นั้น)
  • Caption บนรูปภาพ
  • Responsive: ปรับขนาดฟอนต์บนมือถือ
  • Loop: เลื่อนเกินหน้าสุด -> กลับหน้าแรก

โครงสร้าง JavaScript

  1. slideIndex - ตัวแปร Global เก็บหน้าปัจจุบัน
  2. showSlides(n) - ฟังก์ชันหลัก แสดงสไลด์ที่ n ซ่อนอื่นๆ
  3. changeSlides(n) - เลื่อน +n/-n เรียก showSlides
  4. currentSlide(n) - กด Thumbnail -> ไปสไลด์นั้น
  5. setSlide(number) - เรียกจาก onclick อัปเดต Thumbnail Border

ผลลัพธ์

สไลด์โชว์ 3 รูป พร้อม Thumbnail 3 รูปด้านล่าง Prev/Next ด้านข้าง Caption ใต้รูป