Carousel slider type

In this article

☝️ Note: This slider type is only available in the Pro version of Smart Slider 3.

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 tab

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

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.
  • Crossfade: The current slide fades out and at the same time the next one fades in.
  • Horizontal: The current slide moves to the left and the next one comes in from the right.
  • Vertical: The current slide moves upwards and the next one comes in from below.
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.

☝️ Note: Looking for the Autoplay feature? Find it at the Autoplay tab.
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. Also the autoplay will stop at the last slide.

Single Switch
☝️ Note: This option is only available if the Main animation is set to Horizontal!

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
☝️ Note: This option is available when the Single Switch is turned on.

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

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

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

Example:

Set slider size 1200x500px 1200x500px 1200x500px
Slide size 400x400px 400x400px 250x400px
Minimum slide distance 0px 20px 10px
Maximum pane width 3000px 3000px 1200px
Browser width 1200px 1200px 1200px
Displayed slides 3 2 4

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

2
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.

3
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.

At the Carousel slider you can change the Main Animation to Vertical, which will switch the slides in a vertical direction.

4
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;
}
	
☝️ Note: You cannot use Maximum pane width, because the overflow hides the parts, which suppose to be hidden outside this maximum width.

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.

5

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.

Alternatively, you can create a new Block where you can put the heading content, and publish it above the carousel.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.