Dynamic Responsive Image Slider Plugin For jQuery - TCF Slider

Yet another jQuery slider plugin that lets you create a dynamic, accessible, fully responsive image carousel for both desktop and mobile webpages.

More Features:

• Carousel-like infinite looping.
• Autoplay.
• Auto resizes based on the image's size.
• Image captions supported.
• Slide or fade transition effects.

How to use it:

1. Load jQuery library together with the jQuery TCF Slider plugin's JS and CSS files in your html page.

<link rel="stylesheet" href="css/tcf-slider.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/tcf-slider.min.js"></script>

2. Create a container for the image slider.

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

3. Call the function on the container and specify an array of images for the slider.

$('#tcf-slider').tcf_slider({
  images: [{
    src: "1.jpg"
  }, {
    src: "2.jpg"
  }, {
    src: "3.jpg"
  }, {
    src: "4.jpg"
  }, {
    src: "5.jpg"
  }]
})

4. You can also add custom captions to your images like this:

$('#tcf-slider').tcf_slider({
  images: [{
    src: "1.jpg",
    caption:"Image 1"
  }, {
    src: "2.jpg",
    caption:"Image 2"
  }, {
    src: "3.jpg",
    caption:"Image 3"
  }, {
    src: "4.jpg",
    caption:"Image 4"
  }, {
    src: "5.jpg",
    caption:"Image 5"
  }]
})

5. Full plugin settings with default values.

$('#tcf-slider').tcf_slider({

  // an array of images
  images: [], 

  // enable carousel mode
  loop: true,

  // autoplay
  autoChange: true,

  // 'slide', 'fade' or 'none'
  transition: "slide",

  // autoplay interval
  changeInterval: 4000,

  // transition duration
  transitionDuration: 400
  
})

---

This awesome jQuery plugin is developed by Yalgie. For more Advanced Usages, please check the demo page or visit the official website.