Page 1
Carousel-Slider.js is made to fit any window size like a charm. It even comes with keyboard support and swipe gestures built in.
Your time matters, so I made Carousel-Slider.js super quick and easy to use. If you know HTML you're ready to rock.
You want your website to be loaded as fast as possible. Carousel-Slider only weights ~6KB which is an average of 0,0001s loadtime. You name it – it's nothing.
The things that matter the most in your life are free. That's one of many reasons why this slider is free. Oh and it's Open Source as well, so you can make it even better.
Carousel-Slider.js requires jQuery. Add jQuery and the Carousel-Slider.js to your document:
That's it, you're ready to rock!
In your HTML create the Carousel Slider like so:
In a nutshell:
HTML code:
Creating an image slider is fairly easy, just use them as background Images in CSS:
You could also add them as img tag withing the "content" containers
To add a carousel slider within a carousel slider is fairly easy, as I wrote before, you can add anything you want into a slide even another carousel slider. Check out the code:
Each carousel slider has some options you can tweak with the help of attributes directly within html. Which makes every carousel slider on your page flexible. For example you could stop the autoplay function of one slider while maintaining it on the other. Here are all attributes you can use:
data-width="…" | Sets the width of that specific carousel slider. Any unit can be used. Example: data-width="100%" |
data-height="…" | Sets the height of that specific carousel slider. Any unit can be used. Example: data-height="150px" |
data-autoplay="…" | Choose wheter the carousel slider should start sliding automatically or not. true or false. Default is true. Example: data-autoplay="false" |
data-speed="…" | Choose in milliseconds how fast the transition animation between two slides is. Any integer. Default is 1000 (1sec). Example: data-speed="2000" Caution: data-speed should always be less than data-time |
data-time="…" | Choose the time between each slide in milliseconds. Any integer. Default is 7000 (7sec). Example: data-time="3000" Caution: data-time should always be higher than data-speed |
data-overflow="…" | Choose what happens if there is an overflow within a slide. Any valid CSS value. Default is auto. Example: data-overflow="hidden" |
data-swipe="…" | Is swiping through with your fingers allowed (phone/tablet gesture). Default is true. Example: data-swipe="false" |
Here is an example using all custom attributes:
The HTML looks like this:
The order of the attributes does not matter nor are the attributes case sensitive.
Unless you turned it off via data-swipe you can use your fingers on your mobile phone or tablet to control the carousel-slider. You can use the keyboard to control the carousel-slider as well:
⌨ Keyboard | |
← left key | Slides to the left |
→ right key | Slides to the right |
[ ] space bar | Play/Pause |
↹ tab key | Select carousel sliders |
✌ Gestures | |
☜ left swipe | Slides to the left |
☞ right swipe | Slides to the right |
☝ tap | on an arrow slides respective direction |
The respective carousel-slider has to be selected to read keyboard usage.
Carousel-Slider.js triggers events when an interaction takes place which you can use to implement further interactivity to your page.
cls-play | user click/tap on the play button or use spacebar |
cls-pause | user clicks/taps on the pause button or use the spacebar |
cls-clickLeft | click on the left arrow |
cls-touchLeft | touche/tap on the left arrow |
cls-swiperight | user swipes to the right |
cls-keyLeft | user press the left key |
cls-left | the slide moves one slide to the left |
cls-clickright | click on the right arrow |
cls-touchright | touche/tap on the right arrow |
cls-swipeLeft | user swipes to the left |
cls-keyright | user press the right key |
cls-right | the slide moves one slide to the right |
Each Carousel-Slider.js triggers an event on it's own. You can capture and use these triggers with jQuery within your code. Here is an example:
$('.carousel-slider').on('cls-pause',function(){ // do Stuff when any Carousel-Slider is paused })
The code above captures when any slider is paused. What you might want to do if you have added special things to the slider is to get the slide left or right of one specific slider. That's possible with the use of IDs. Here is an example:
$('#mySlider').on('cls-right',function(){ // do Stuff when mySlider slides one to the right })
The code above captures when a specific Carousel-Slider with the ID of mySlider is sliding one slide to the right. Now you can do Stuff based on that trigger. Happy hacking.