Slider type - Carousel
If you are wondering what's the difference between the Showcase's and Carousel's responsive behavior, check out this documentation or learn more about how to make your Carousel slider to show more slides-
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:
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
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.
You can put a border around the whole slider. Here you can choose its size, color, and radius.
You can choose a background color and a radius for your slides.
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.
If you have enough slides, you can turn it into a carousel.
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.
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 do I make the slider to show the number of slides I want?
The Carousel slider shows the slides based on:
It can't be set on a per device or per orientation basis.
Slider size and visible slides example:
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