{Theme} comes with two main types of sliders. Each type can be additionally customized by data-attributes.
Simple slider
Slick slider
HTML markup for slider:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<section class="ct-js-slick ct-slick ct-slick-arrow--type3 ct-u-marginBottom30" data-animations="true" data-autoplay="false" data-arrows="true" data-items="1" data-XSitems="1" data-SMitems="1" data-MDitems="1"> <div class="item"> [content] </div> <div class="item"> [content] </div> <div class="item"> [content] </div> </section> |
You can edit arrows types by adding one of the following classes to <section>:
- ct-slick-arrow–type1
- ct-slick-arrow–type2
- ct-slick-arrow–type3
- ct-slick-arrow–type4
- ct-slick-arrow–type5
- ct-slick-arrow–type6
There are also two types of image hover effect, which can be edited analogously, with the following classes:
- ct-slick-thumbnailHover–type1
- ct-slick-thumbnailHover–type2
Synch Slider
Synch slider
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="synced-1" class="ct-slick--synced ct-slick--synced--type2"> <div class="ct-slick ct-js-slick ct-js-slick-for" data-items="1" data-arrows="false" data-draggable="false" data-touchMove="false"> <div class="item"><img src="assets/images/demo-content/radish01.jpg" alt=""/></div> <div class="item"><img src="assets/images/demo-content/radish02.jpg" alt=""/></div> <div class="item"><img src="assets/images/demo-content/radish03.jpg" alt=""/></div> <div class="item"><img src="assets/images/demo-content/radish04.jpg" alt=""/></div> <div class="item"><img src="assets/images/demo-content/radish05.jpg" alt=""/></div> </div> <div class="ct-slick ct-js-slick ct-js-slick-nav ct-slick-arrow--type4 ct-slick-thumbnailHover--type2" data-items="1" data-centerMode="true" data-centerPadding="0" data-asNavFor="#synced-1 .ct-js-slick-for" data-XSitems="2" data-SMitems="4" data-focusOnSelect="true"> <div class="item"><img src="assets/images/demo-content/radish01.jpg" alt=""/></div> <div class="item"><img src="assets/images/demo-content/radish02.jpg" alt=""/></div> <div class="item"><img src="assets/images/demo-content/radish03.jpg" alt=""/></div> <div class="item"><img src="assets/images/demo-content/radish04.jpg" alt=""/></div> <div class="item"><img src="assets/images/demo-content/radish05.jpg" alt=""/></div> </div> </div> |
You can edit synch slider arrow positions with the following classes:
- ct-slick–synced–type1
- ct-slick–synced–type2
Both sliders require using the following scripts:
|
1 2 |
<script src="assets/plugins/slick/slick.min.js"></script> <script src="assets/plugins/slick/init.js"></script> |