Slick Slider in {Theme} have two types navigation with three (dots) and four (arrows) variations
Dots
ct-slick-dots–type1
This type has the following positions:
— ct-slick-dots–rightTop
— ct-slick-dots–rightBottom
— ct-slick-dots–centerBottom
— ct-slick-dots–leftTop
— ct-slick-dots–rightTop
— ct-slick-dots–centerTop
HTML markup
|
1 2 3 |
<div class="ct-js-slick ct-slick ct-slick-dots--type1 ct-slick-dots--centerTop slick-initialized slick-slider"> [ -- ] </div> |
Screenshot
Example of dots slider nav
ct-slick-dots–type2
HTML markup
|
1 2 3 |
<div class="ct-js-slick ct-slick ct-slick-dots--type2 slick-initialized slick-slider"> [ -- ] </div> |
Screenshot
Example of dots slider nav 2
ct-slick-dots–type3
This type has the following positions:
1. ct-slick-dots–rightTop
2. ct-slick-dots–rightBottom
3. ct-slick-dots–centerBottom
4. ct-slick-dots–leftTop
5. ct-slick-dots–rightTop
6. ct-slick-dots–centerTop
HTML markup
|
1 2 3 |
<div class="ct-js-slick ct-slick ct-slick-dots--type3 ct-slick-dots--rightBottom"> [ -- ] </div> |
Screenshot
Arrows
ct-slick-arrows–type1
This type has the following positions
1. ct-slick-arrows–position1
HTML markup
|
1 2 3 |
<div class="ct-js-slick ct-slick ct-slick-arrows--type1 ct-slick-arrow--position1r"> [ -- ] </div> |
Screenshot
Example of arrow slider nav
ct-slick-arrows–type2
This type has the following positions (vertical align middle, arrow on the left side (content), arrow on the right side (content))
1. ct-slickarrow–middleCorners (vertical align middle, arrow on the left side (body), arrow on the right side (body))
HTML markup
|
1 2 3 |
<div class="ct-js-slick ct-slick ct-slick-arrows--type2 ct-slickarrow--middleCorners slick-initialized slick-slider"> [ -- ] </div> |
Image:
Example of arrow slider nav 2
ct-slick-arrows–type3
This type has the following positions:
This type has a extra another class “ct-slick-arrows–motive”, which one changing our arrow color on hover into motive color
1. ct-slick-arrows–position1 (vertical align middle, arrow on the left side, arrow on the right side)
2. ct-slick-arrows–position2 (vertical align bottom, and arrows on the middle)
3. ct-slick-arrows–position4 (vertical align bottom, and arrows on the right side)
4. ct-slick-arrows–position5 (vertical align bottom, and arrows on the left side)
5. ct-slick-arrows–position8 (vertical align top, and arrows on the middle)
HTML markup
|
1 2 3 |
<div class="ct-js-slick ct-slick ct-slick-arrows--type2 ct-slickarrow--middleCorners"> [ -- ] </div> |
Screenshot
Example of arrow slider nav 3
ct-slick-arrows–type4
This type has the following positions
1. ct-slick-arrows–position1
2. ct-slick-arrows–position2
3. ct-slick-arrows–position3
4. ct-slick-arrows–position4
5. ct-slick-arrows–position5
6. ct-slick-arrows–position7
HTML markup
|
1 2 3 |
<div class="ct-js-slick ct-slick ct-slick-arrows--type4 ct-slick-arrows--position7 slick-initialized slick-slider"> [ -- ] </div> |
Screenshot
Example of dots slider nav 4