Slider type - Carousel

This slider type is only available in the Pro version.
Turn on the  Expert mode to see the slider type selection!

This slider type is only available in the Pro version.
You can find the General tab in here.
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:

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.

You can see  here, how you can add border around your slides.
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.

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.

You can use this option to avoid the empty spaces in the last pane of your carousel slider.
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:

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

Related Articles