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

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

 
TCF Slider

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

  • LATEST
  • RELATED
  • POPULAR