Slider type - Accordion

Turn on the  Expert mode to see the slider type selection!
You can find the General tab in here.

The slides will be inside accordions, and you can open them up by clicking on their tabs.

Demo sliders

Would you like to see some example on how the Accordion type sliders are look like on a real site? Check out these demo sliders:

When you are creating a new slide, it will take away a bit of space from the slides, as this new slide needs a new accordion opener, while your slider's size remains. Due to this and the responsivity of the Smart Slider 3 if you make one slide, adjust it's layers, then create another slide, then the layers you just adjusted will go into new positions, and that might not be the place, where you wanted them. Our suggestion is to first decide how many slides do you want in your slider, create that many slides, and only after that put down your layers. 

Accordion type settings


We made two pre-sets, one dark, and one light, which is a good start in designing your slider.


You can have your accordions either horizontally or vertically.

Carousel Expert

If this option is turned on, when you go to the last slide, and you have something to switch to the next slide, it will go to the first one, but if this option is turned off, then it won't switch further.

Border Expert

Defaultly there are two borders around the slider, and you can set them up here.

Tab background

Background color picker for the accordions for Normal and Active state.

Slider Expert

The margin distance between the accordions.

  • Size - This is the width of the accordions, which assures that you have enough space for your titles.
  • Margin Expert - How much the titles are inner in the accordions.
  • Border radius Expert - The rounding of the accordions.
  • Font - The font of the titles. You should check out this documentation for more informations about the font manager.
CSS Expert

You can specify CSS codes for the different parts of this slider type.

Animation settings

Animation settings
  • Duration - This is how long it takes your slider to switch from one slide to another.
  • Easing Expert - The pace of the animation. You can see them here.

Multicolor accordion tabs with custom css codes

Would you like to fresh up your accordion type slider with some new colors? Here is a code that will help you! You can put this into the HTML control for example.

<style type="text/css">
    /* this is for the first tab */
    .n2-ss-slide:nth-child(1) > .n2-accordion-title{
        background-color: #007FA4 !important;
        color: #ff0 !important;
    .n2-ss-slide:nth-child(1) > .n2-accordion-title:hover{
        background-color: #332123 !important;
    /* this is for the second tab */
    .n2-ss-slide:nth-child(2) > .n2-accordion-title{
        background-color: #a32f4d !important;
        color: #ff9911 !important;
    .n2-ss-slide:nth-child(2) > .n2-accordion-title:hover{
        background-color: #f0fce2 !important;
        color: #006423 !important;

To give color for a new tab, just copy the two rules after the comment, and modify the number in the nth-child(). If you would like your 10th tab to be red on normal state, and yellow on hover, this is the code you need:

<style type="text/css">
    /* this is for the 10th tab */
    .n2-ss-slide:nth-child(10) > .n2-accordion-title{
        background-color: red !important;
    .n2-ss-slide:nth-child(10) > .n2-accordion-title:hover{
        background-color: yellow !important;