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.
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.
The Carousel slider has a bunch of new options which you can use to fine-tune your sliders.
You can find these options at the bottom of the Slider settings → General tab.
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.
You can find these options at of the Slider settings → Size tab. The minimum width and height of a carousel slider is 50px.
The width of the slides in your Carousel slider.
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.
You can find these options at of the Slider settings → Animations tab.
The Main animation is a basic animation which can move both the slide backgrounds and layers.
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.
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.
The pace of the animation. You can see them here.
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.
☝️ 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.
☝️ 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.
You can find these options at of the Slider settings → Slides tab.
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.
|Current slider size||1200x500px||1200x500px||1200x500px|
|Minimum slide distance||0px||20px||10px|
|Max pane width||3000px||3000px||1200px|
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
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
box-shadow: 0px 0px 10px 2px #7f7f7f;
With Single Switch
box-shadow: 0px 0px 10px 2px #7f7f7f;
☝️ Note: You cannot use Max pane width, because the overflow hides the parts, which suppose to be hidden outside this maximum width. You also can't use the left and right Side Spacing with the codes above.
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
- Using a Static overlay
- 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.