# Image Slideshow

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

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

```markup
<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>
```

```javascript
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** เพื่อแสดงรูปถัดไป

```css
.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 :](https://www.goragod.com/knowledge/slideshow_%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2_css3_%E0%B9%81%E0%B8%A5%E0%B8%B0_javscript_%E0%B8%A3%E0%B8%AD%E0%B8%87%E0%B8%A3%E0%B8%B1%E0%B8%9A%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%81%E0%B8%AA%E0%B8%94%E0%B8%87%E0%B8%9C%E0%B8%A5%E0%B8%9A%E0%B8%99%E0%B8%A1%E0%B8%B7%E0%B8%AD%E0%B8%96%E0%B8%B7%E0%B8%AD_%E0%B9%84%E0%B8%A1%E0%B9%88%E0%B8%87%E0%B9%89%E0%B8%AD.html).

Project อื่น ๆ

* [https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/](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.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://www.htmlgoodies.com/beyond/javascript/stips/create-a-simple-automated-slideshow.html)
* [https://getbootstrap.com/docs/4.0/components/carousel/](https://getbootstrap.com/docs/4.0/components/carousel/)
* [webunique.in.th](https://webunique.in.th/blog/2016/05/23/%E0%B8%97%E0%B8%B4%E0%B8%9B%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%97%E0%B8%B3-slide-perspective-%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B9%80%E0%B8%81%E0%B9%8B%E0%B9%86-%E0%B9%83%E0%B8%AB%E0%B9%89%E0%B9%80/)
*
