Image Slideshow

Slideshow ด้วย CSS3 และ Javscript รองรับการแสดงผลบนมือถือ ไม่ง้อ JQuery

Slideshow แบบนี้จะเป็นแบบง่ายๆนะครับ โดยมีจุดเด่นที่การใช้ CSS3 ในการทำ Effect และ ใช้ Javascript อีกเล็กน้อยในการควบคุมการแสดงผลของ Slideshow และนอกจากนี้ยังรองรับการใช้งานแบบ Responsive อีกด้วย

<div class="slide_show" id="ss_demo">
    <img src="http://school.gcms.in.th/upload/slideshow/1.jpg">
    <img src="http://school.gcms.in.th/upload/slideshow/2.jpg">
    <img src="http://school.gcms.in.th/upload/slideshow/3.jpg">
</div>

function playSlideShow(id) {
    function show(n) {
       /* รูปทั้งหมด */
       var imgs = document.getElementById(id).getElementsByTagName('img');
       var l = imgs.length;
       
        /* ถึงรูปสุดท้าย กลับไปรูปแรก */
       n = n == l ? 0 : n;
   
        for (var a = 0; a < l; a++) {
            /* image */
            var img = imgs[a];
            if (a == n) {
                 /* รูปที่ต้องการแสดง */
                 img.className = 'select';
            } else {
                 /* รูปอื่นๆ clear class */
                 img.className = '';
            }
       }

       /* คืนค่ารูปที่กำลังแสดง */
       return n;
    }

    /* แสดงรูปแรก */
    var position = show(0);

    /* จับเวลาเปลี่ยนรูปภาพทุก 3 วินาที  (3*1000ms) */
    window.setInterval(function() {
        /* แสดงรูปถัดไป */
        position = show(position + 1);
    }, 3000);
}
/* แสดง slide show */
playSlideShow('ss_demo');

• ในครั้งแรกที่มีการเรียก Slideshow จะแสดงรูปภาพแรกในทันทีโดยการเรียกฟังก์ชั่น show(0)

• ฟังก์ชั่น show จะทำหน้าที่วนลูปไปยัง tag img ที่อยู่ภายในทุกตัว โดยที่ tag img ลำดับที่ตรงกับค่าที่ส่งให้ฟังก์ชั่น จะมีการใส่ class select ให้กับ tag นั้นๆ และเช่นเดียวกัน tag img ตัวอื่นๆก็จะถูกกำหนดให้มี class ว่างๆ (หรือไม่มี class)

• ฟังก์ชั่น show จะคืนค่า ลำดับของ tag img ที่ใส่ class select เนื่องจากหากค่าที่ส่งให้ฟังก์ชั่นเกินกว่า tag ที่มี เช่น เป็นรูปสุดท้าย ค่าที่ส่งกลับจะไปเริ่มต้นที่ 0 ใหม่

• ฟังก์ชั่น window.setInterval จะทำหน้าที่จับเวลาเพื่อเปลี่ยนรูปภาพถัดไปมาแสดง โดยมีระยะห่างระหว่างแต่ละรูปเป็น 3000ms หรือ 3 วินาทีนั่นเอง โดยเมื่อครบกำหนดจะมีการส่งค่า position + 1 ให้ฟังก์ชั่น show เพื่อแสดงรูปถัดไป

.slide_show {
    position: relative;

    /* responsive */
    display: inline-block;
    width: 100%;
}
.slide_show img {
    position: absolute;
    left: 0;
    top: 0;

    /* responsive image */
    width: 100%;
    max-width: 100%;
    height: auto;
    
    /* speed ของ effect */
    transition: 1s;

    /* fade out*/
    opacity: 0;
}
.slide_show img.select {
    /* fade in  */
    opacity: 1;
}

โค้ดส่วนสุดท้ายคือโค้ด CSS ซึ่งทำหน้าที่ควบคุม Effect และ การแสดงผลแบบ Responsive ในตัวอย่างนี้ Effect ที่ใช้คือ fade in-out (โดยการใช้ opacity) ซึ่งสามารถเปลี่ยนรูปแบบของ Effect เป็นอย่างอื่นได้โดยกำหนดรูปแบบในส่วนที่ผมทำเครื่องหมายไว้

Reference :.

Project อื่น ๆ

• https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

• https://www.w3docs.com/snippets/css/how-to-create-an-image-slider-or-slideshow.html

• https://www.htmlgoodies.com/beyond/javascript/stips/create-a-simple-automated-slideshow.html

• https://getbootstrap.com/docs/4.0/components/carousel/

• webunique.in.th