Carousel slider type

You can select Carousel slider type at the Project creation.

Basic behavior

This slider type can show more slides next to each other. This makes Carousels perfect for product or post sliders. 

The amount of slides the Carousel displays depends on the set Slide size and the slider's size. The slides keep their size, so they don't scale up when the slider gets wider. Instead, the Carousel type can show more slides. If the slider size gets smaller, then first the slides start to disappear, until only one can fit. If the slider width gets smaller than the set Slide width then the slide will start getting smaller, too.

If the slider is wider than the space the visible slides need, the remaining space will be divided equally around the slides. This means that if your slider is 1200px wide, and the slides take up 900px of this, then the remaining 300px will be divided equally around them. If you're using Single Switch you can adjust where this space is using  the Justify slides option.

Configuration

The Carousel slider has a bunch of new options which you can use to fine-tune your sliders.

General tab

You can find these options at the bottom of the Slider settings → General tab.

Side spacing

With the size spacing feature you can create a fix distance between the slider and the slides. You can use this space to place your controls, or even to add a title to your slider.

• Desktop: The distance between the slider and slides on desktop.
• Tablet: The distance between the slider and slides on tablet.
• Mobile: The distance between the slider and slides on mobile.

Size

Size tab

You can find these options at of the Slider settings → Size tab.

The minimum width and height of a carousel slider is 50px.

Slide Size

Slide width

The width of the slides in your Carousel slider.

Slide height

The height of the slides in your Carousel slider.

Max pane width

The slides which appear next to each other in a Carousel slider are in one pane. By setting a maximum width to this pane, you can limit the maximum amount of slides that can be displayed next to each other.

Minimum slide distance

The minimum gap between the slides. Depending on the size of the slider, the gap can be greater than the given value, but never smaller.

Animation tab

You can find these options at of the Slider settings → Animations tab.

Main Animation

The Main animation is a basic animation which can move both the slide backgrounds and layers.

Main Animation

The direction of the Main animation.

• No animation: The slides change without animation.
• Fade: The current slide fades out and reveals the next one behind.
• Horizontal: The current slide moves to the left and the next one comes in from the right.

Duration

The amount of time the animation takes to complete. The larger the value the more time it takes for the animation to finish. So basically, it's the speed of the animation.

Easing

The pace of the animation. You can see them here.

Carousel

Your slider can either have a beginning and an end, or it can be a carousel, meaning that after the last slide the first will come. If you turn off the carousel, the left arrow will disappear on the first slide, and the right arrow will disappear on the last slide.

Single Switch

By default the Carousel type moves the whole pane (all visible slides) during slide switching. With the Single switch option you can make the slider switch slide by slide.

Justify slides

You can align your slides within the current pane.

• Space between: Aligns the slides at the side to the edge of the slider, and dives the space equally in the middle.

  

• Space Around: Divides the space equally around the slides.

  

• Center: Aligns the slides to the middle, using the Minimum Slide Distance to create spacing between them.

  

Slides tab

You can find these options at of the Slider settings → Slides tab.

Slides design

Slide background color

You can set a unified background color for all slides, which doesn't have their own background already

Slide Border Width

You can set the width of the border that's added to the slides.

Slide Border Color

You can set the color of the border added to the slides.

Slide Border Radius

You can round the slide's corners.

Frequently Asked Questions

How can I set the Carousel slider to show more slides?

The amount of slides this slider type displays depends on the current Slider size, the set Slide size , Minimum slide distance and Max pane width . There's no way to set how many slides you want to display on different devices.

You can find these options at of the Slider settings → Size tab.

Example:

Basically, if you would like your slider to show more slides, you should increase the Slider size or Max pane width , or reduce the Slide size or Minimum slide distance .

How can I make my carousel slider type to not have empty space in the end?

This empty space can happen, when you don't have enough slides to fill all panes. (A pane is the group of slides that are shown together.)


You can get rid of the empty space by turning on the Single Switch which is available when the Main Animation is set to Horizontal.

Another solution can be calculating how many slides do you need to fill all panes. For example, if your slider displays 4 slides on desktop, then you should have a slide count that can be divided by 4 without a remainder. Probably you'll get the best result by having 12 slides in this case.

How to make the Carousel slider vertical?

The Carousel slider doesn't have a vertical option. If you would like to have a vertical slider that shows many slides below each other, you should use the Showcase slider instead.

How to add box shadow around the slides?

You can add box shadow around the slides with custom CSS coding. We recommend having a basic understanding on how CSS codes work before trying to add these custom codes.

First check what is your slider's ID, because these codes only will be applied to one given slider. In my example my slider's ID will be: 15. So replace every 15 number with your ID number in the following codes.

You can insert these CSS codes for example to the Slider settings → Developer tab → CSS field.

Without Single switch

div#n2-ss-15 .n2-ss-slide{
    box-shadow: 0px 0px 10px 2px #7f7f7f;
}
div#n2-ss-15 .n2-ss-slider-pane{
    overflow: visible!important;
}

With Single Switch

div#n2-ss-15 .n2-ss-slide{
    box-shadow: 0px 0px 10px 2px #7f7f7f;
}
div#n2-ss-15 .n2-ss-slider-pane-single{
    overflow: visible!important;
}

If you're looking for a CSS free solution, you could put a row inside your slide, where you put all layers, and use the Box shadow on the row. Leave the default 10px padding on the slide to be able to see this shadow. If you see white background on the slides, make sure the Slide background color is transparent.

How to create a header for the Carousel?

You can create a header for your Carousel in two ways

1. Using a Static overlay
2. Creating a Block type slider and publishing it above your Carousel

You can create a header for your carousel by creating a Static Overlay. Then put the heading you want to have above the slider on this Static Overlay, then add some top Side Spacing to create distance between the top of the slider and slides, large enough for the header text to fit. Depending on your slider size, you might need to use an Absolute positioned layer to create the heading.

For the best responsive result, we recommend creating a new Block where you can put the heading content, and publish it above the carousel.