Dynamic Responsive Image Slider Plugin For jQuery - TCF Slider
File Size: | 17.3 KB |
---|---|
Views Total: | 4034 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.