【jQuery】レスポンシブでシンプルなスライダープラグインTCF Slider

jQuery

TCF Slider

October 28, 2016

TCF SliderはレスポンシブでシンプルなスライダーjQueryプラグイン。

マークアップ

$(document).ready(function() {
    $('#tcf-slider').tcf_slider({
        // Options
        images: [{
            src: "images/image_1.jpg"
        }, {
            src: "images/image_2.jpg"
        }, {
            src: "images/image_3.jpg"
        }, {
            src: "images/image_4.jpg"
        }, {
            src: "images/image_5.jpg"
        }]
    })
})

HTML

<div id="tcf-slider"></div>

Options

  1. Loop
  2. Auto Change
  3. Change Interval
  4. Transition
  5. Transition Duration
  6. Image Attributes

Advanced Example

$(document).ready(function() {
    $('#tcf-slider').tcf_slider({
        loop: true,
        autoChange: false,
        transition: "slide",
        changeInterval: 4000,
        transitionDuration: 400,
        images: [{
            src: "images/image_1.jpg",
            alt: "Image alt"
        }, {
            src: "images/image_2.jpg"
        }, {
            src: "images/image_3.jpg",
            title: "Image Title"
        }, {
            src: "images/image_4.jpg"
        }, {
            src: "images/image_5.jpg"
        }]
    })
})

MIT

Latest Posts

Related Posts