Page 1
Documentation
1. Installation
Carousel-Slider.js requires jQuery. Add jQuery and the Carousel-Slider.js to your document:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://kit.thibaultjanbeyer.com/tools/carousel-slider.js/cls.min.js"></script>
That's it, you're ready to rock!
2. Basic Slider
In your HTML create the Carousel Slider like so:
<div class="carousel-slider" data-width="250px" data-height="150px"> <div class="inner"> <div class="slide" style="background:lightblue"> <div class="content"> <p>Page 1</p> </div> </div> <div class="slide" style="background:lightgreen"> <div class="content"> <p>Page 2</p> </div> </div> </div> <div class="arrow left"> ❮ </div> <div class="arrow right">❯</div> <p class="pause">Pause</p> <p class="play">Play</p> </div>
In a nutshell:
- The class "carousel-slider" indicates that this box is out slider.
- data-width and data-height let you choose the width and height of the slider, you're not limited to px, use any unit you want. (you can always set this in CSS as well)
- "slide" are your actual slides, color the background if you want. Copy and paste the div as many times as you want to add more slides.
- And place all your content for a specific slide within the "content" div it does not matter what tipe of content you're using, everything will work (img, divs, iframes, svg, lists, etc etc)
- "arrow left" and "arrow right" is the space left and right where, when you hover it, you see a part of the other slide. If you don't want to have them, you can just omit those two div's.
- "pause" and "play" are buttons for pause and play, style them how ever you want them to have in css or replace the html text. If you don't want to have play/pause buttons just omit those two div's.
2b. Without controls
HTML code:
<div class="carousel-slider" data-width="50%" data-height="150px"> <div class="inner"> <div class="slide" style="background:lightblue"> <div class="content"> <p>Page 1</p> </div> </div> <div class="slide" style="background:lightgreen"> <div class="content"> <p>Page 2</p> </div> </div> </div> </div>
2c. Image Slider
Creating an image slider is fairly easy, just use them as background Images in CSS:
<div class="carousel-slider" data-width="40vw" data-height="150px"> <div class="inner"> <div class="slide" style="background:url('free1.jpg'); background-size: cover"></div> <div class="slide" style="background:url('free2.jpg'); background-size: cover"></div> <div class="slide" style="background:url('free3.jpg'); background-size: cover"> <div class="content" style="color:white">Text on an image</div> </div> </div> <div class="arrow left"></div> <div class="arrow right"></div> </div>
You could also add them as img tag withing the "content" containers
2d. Slider within slider
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:
<div class="carousel-slider" data-width="100%" data-height="250px" data-autoplay="false"> <div class="inner"> <div class="slide" style="background:lightblue"> <div class="content"> <p>Page 1</p> <div class="carousel-slider" data-width="100%" data-height="100px"> <div class="inner"> <div class="slide" style="background:yellow"> <div class="content"> <p>Page 1.1</p> </div> </div> <div class="slide" style="background:white"> <div class="content"> <p>Page 1.2</p> </div> </div> </div> <div class="arrow left"> ❮ </div> <div class="arrow right">❯</div> <p class="pause">Pause</p> <p class="play">Play</p> </div> </div> </div> <div class="slide" style="background:lightgreen"> <div class="content"> <p>Page 2</p> </div> </div> </div> <div class="arrow left"> ❮ </div> <div class="arrow right">❯</div> <p class="pause">Pause</p> <p class="play">Play</p> </div>
3. Custom Attributes
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:
<div data-autoplay="false" class="carousel-slider" data-width="100%" data-height="150px" data-speed="2000" data-time="3000" data-overflow="scroll" data-swipe="true"> <div class="inner"> <div class="slide" style="background:lightblue"> <div class="content"> <p>Page 1</p> </div> </div> <div class="slide" style="background:lightgreen"> <div class="content"> <p>Page 2</p> </div> </div> </div> <div class="arrow left">❮</div> <div class="arrow right">❯</div> <p class="pause">Pause</p> <p class="play">Play</p> </div>
The order of the attributes does not matter nor are the attributes case sensitive.
4. Alternate Controls
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.
5. Events
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.