View a demo here. Or download the repo and view the demo folder.
TCF Slider is a simple jQuery slider plugin that is accessible and responsive. I built the slider so that it's only got the bare neccessities, there is no need to include any fonts or extra files and the only dependency is jQuery.
Download and link to the minified files in the /dist
folder.
Or install via npm:
npm i -S tcf-slider
Inside a <script>
tag or inside a custom js file insert the slider plugin markup.
Here is a basic example of the slider plugin markup:
$(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"
}]
})
})
Notice the specific ID referenced in the above plugin function call, this will need to be referred to in the HTML in step 3.
Insert the reference div into your html file:
<div id="tcf-slider"></div>
And you're good to go! As long as you've referenced everything correctly, and all your files are correctly being linked to you should be sweet. Check out the options below to see some different ways you can customise the slider.
loop: false
Type = Boolean (True or False).
Default = false.
If we had a slider with 5 images, when the slider reached the 5th image and loop
is set to true
the slider will loop back to the 1st image and continue sliding through the images.
autoChange: false
Type = Boolean (True or False).
Default = false.
If autoChange
is set to true
the slider will automatically change images without any prompt from the user.
changeInterval: 4000 // 4 seconds
Type = Int (Number).
Default = 4000 (4 seconds).
This option will only take affect if the above autoChange
option is set to true
, this option defines the amount of time it will take before the next image changes.
transition: "none"
Type = String.
Default = "none" (no animation).
Options:
- "none"
- "fade"
- "slide"
This option defines what type of animation you would like the images to use when they transition.
transitionDuration: 400
Type = Int (Number).
Default = 400 (0.4 seconds).
This option defines the time it takes to animate between each image. This option will only take effect when the transition
option is set to slide
or fade
.
Each image can have an alt
and title
attribute. If these are not defined the plugin will just append a blank attribute tag.
src: "images/image_1.jpg",
alt: "Alt Text",
title: "Image Title"
Below is an advanced example showing how you how to implement the options:
$(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"
}]
})
})