Slider type - Carousel
This slider type will have the same height, unless if the screen is smaller, than one slide, because then it will go smaller too. You will see as many slides next to each other, as much space there is to show. The switching will switch all visible slides together. Demos:
Demo sliders
Would you like to see some example on how the Carousel type sliders are look like in a real site? Check out these demo sliders:
Carousel Slider type settings
Slide size
The width and height of the slides.
Maximum pane width
The maximum width for the slides to be next to each other. Until this size, you will get the slides appearing next to each other, if there is space, but over this size only the background of the slider will grow.
Minimum slide distance
You can set the minimum gap between the slides.
Slider background image
- Color - You can choose a color for the whole slider. This will be behind the slides.
- Image - You can choose an image background for the whole slider. This will be behind the slides.
- Fixed - With this option turned on, your image will be in a fix position, even when you scroll in your browser's window.
- Size Expert - The size of the background image. This can be any background-size css code value.
Border Expert
You can put a border around the whole slider. Here you can choose its size, color, and radius.
Slide
You can choose a background color and a radius for your slides.
Animation settings
Main animation Expert
The transition during slide switching. This option only works, when the Single switch is turned off.
Main animation properties
- Duration - This is how long it will take your slider to switch from one slide to another.
- Delay Expert - This is how much the sliding will wait.
- Easing Expert - The pace of the animation. You can see them here.
Carousel Expert
If you have enough slides, you can turn it into a carousel. This means that the slides will cycle through continuously without stopping at the last slide.
Single switch
The animation will change only one slide, not the entire pane. Only the first slide will be the active one, but events and clicks will work on the other slides, too. Layer animations without events are not working on the non-active slides.
Slider side spacing
You can use this setting to avoid empty spaces between the first and last slide and the pane next to them.
Slider side spacing on | Slider side spacing off |
Dynamic slider height 3.1.4
The slider adjusts its height according to the browser height. For example, in a wider, less high browser the slides will be smaller so you can display more slides.
Frequently Asked Questions
How can I add borders/shadows to the slides?
You can find a documentation about this in here.
How can I have the number of slides I want?
The Carousel slider shows the slides based on:
- Slider size (width value)
- Slide size (width value)
- Minimum slide distance
- Maximum pane width (but with the default 3000px this doesn't matter)
So if you want a given number of slides, the slide size + minimum slide distances has to be smaller or equal to the slider size's width or to the maximum pane width.
This can't be set on a per device or per orientation basis.
Slider size and visible slides example:
Slider setup
Slider size | 1300x400px |
Slide size | 400x300px |
Minimum slide distance | 0px |
Maximum pane width | 1300px |
Slider size and visible slides
Slider size in browser | Visible slides |
---|---|
1300x400px | 3 |
1500x400px | 3 |
1100x400px | 2 |
768x400px | 1 |