ทำรูปสไลด์ด้วย javascript-image-slider

ทำรูปสไลด์ด้วย javascript-image-slider

มาทำรูปสไลด์ด้วย Javascript image slider กันครับ

คุณสมบัติต่าง ๆ

    Pure Javascript ( non jQuery, non flash ) 
    Lightweight (16kb) 
    HTML captions 
    17 transition effects, customizable 
    Easy to tweak through Javascript option variable and CSS 
    Support linking images 
    Slider starts on DOM ready (DOMContentLoaded) instead of the delayed window.onload (new in v2013.11.22) 
    Can set starting slide (by any index number, or random/shuffle) (new in v2013.11.22)
    Supported by all major browsers
    IE 7.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+ 
    Create/update image slider dynamically 
    Price: Free (or $20 if advanced features are used, see below)

Easiest Way to Use the Image Slider (วิธีการใช้ Image Slider)


Download the demos, copy the demo's code and paste it into your page. When you see it is working, you can start customizing it to your own style by tweaking the HTML, CSS code, or changing the options in the JavaScript file(js-image-slider.js).

The source code in the download package includes: HTML (demo1-8.html), CSS (js-image-slider.css), and Javascript (js-image-slider.js).


วิธีการใช้ง่าย ๆ ก็คือ ก่อนอื่นต้อง Download ไฟล์ Demo ทางเว็บไซต์มาก่อน จากนั้นก็นำโค้ดไปวางในเพจ ลองทดสอบดู ถ้าใช้ได้แล้วก็ลอง ๆ ปรับ ๆ โค้ดดู ซึ่งโค้ดดูไม่ยาก ในไฟล์ Demo ที่โหลดไปก็จะมีไฟล์ HTML CSS แล้วก็ Javascript

ดูรายละเอียดและดาวน์โหลดได้ที่ http://www.menucool.com/javascript-image-slider

yengo หรือ buzzcity