All sliders in {Theme} are created with OWL Slider plugin – here you will find plugins documentation.
Also each page, where you are including the slider should have attached the following script:
owl.carousel.min.js
Below you will find general HTML markup for slider:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="ct-js-owl" data-items="5" data-navigation="false" data-autoPlay="true" data-single="false" data-pagination="false" data-snap-ignore="true"> <div class="item"> <img src="assets/images/demo-content/partners_buisness5.png" class="grayscale grayscale-fade" alt=""> </div> <div class="item"> <img src="assets/images/demo-content/partners_buisness4.png" class="grayscale grayscale-fade" alt=""> </div> <div class="item"> <img src="assets/images/demo-content/partners_buisness3.png" class="grayscale grayscale-fade" alt=""> </div> <div class="item"> <img src="assets/images/demo-content/partners_buisness2.png" class="grayscale grayscale-fade" alt=""> </div> <div class="item"><img src="assets/images/demo-content/partners_buisness5.png" class="grayscale grayscale-fade" alt=""> </div> <div class="item"><img src="assets/images/demo-content/partners_buisness3.png" class="grayscale grayscale-fade" alt=""> </div> <div class="item"><img src="assets/images/demo-content/partners_buisness1.png" class="grayscale grayscale-fade" alt=""> </div> </div> |
There are 4 types of sliders:
Main slider
Example of usage can be found here.
Slider with bottom left pagination
ct-pagination–BottomLeft – to create navigation at the bottom left side.
Slider with middle navigation
Add to the HTML markup class:
ct-navigation–variation1 – to create navigation in the middle of the slide.