There are several available options for the slider navigation placement. Each variation can be enabled with one of the following CSS classes added to HTML markup of the slider:
— ct-mainCarousel.ct-mainCarousel–arrowsMiddle,
— ct-mainCarousel.ct-mainCarousel–arrowsTop,
— ct-mainCarousel.ct-mainCarousel–arrowsTopRight,
— ct-mainCarousel.ct-mainCarousel–arrowsTopLeft,
— ct-mainCarousel.ct-mainCarousel–arrowsBottom,
— ct-mainCarousel.ct-mainCarousel–arrowsBottomLeft,
— ct-mainCarousel.ct-mainCarousel–arrowsBottomRight,
— ct-mainCarousel.ct-mainCarousel–arrowsCenterTop,
— ct-mainCarousel.ct-mainCarousel–arrowsCenterBottom
HTML MARKUP
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!-- Main Carousel --> <div class="ct-js-owl ct-u-owl ct-mainCarousel ct-mainCarousel--arrowsMiddle" data-single="true" data-height="844" data-animations="true" data-navigation="true" data-pagination="false" data-bg="true" data-snap-ignore="true"> <div class="item" data-bg="../assets/images/demo-content/slide-number-first.jpg" data-position="center center"> <!-- 1' OwlSlider item --> <div class="inner"> <div class="ct-dividedButtons ct-dividedButtons--bottomMiddle"> <div class="btn-group btn-block" role="group" aria-label="..."> <button type="button" class="btn btn-primary">Student Division (8+)</button> <button type="button" class="btn btn-gray">Attend class <i class="fa fa-angle-double-right"></i></button> </div> </div> </div> </div> <div class="item" data-bg="../assets/images/demo-content/main-slider-3.jpg" data-position="right center"> <!-- 2' OwlSlider item --> <div class="inner"> <div class="ct-dividedButtons ct-dividedButtons--bottomMiddle"> <div class="btn-group btn-block" role="group" aria-label="..."> <button type="button" class="btn btn-primary">Student Division (8+)</button> <button type="button" class="btn btn-gray">Attend class <i class="fa fa-angle-double-right"></i></button> </div> </div> </div> </div> <div class="item" data-bg="../assets/images/demo-content/main-slider4.jpg" data-position="right"> <!-- 3' OwlSlider item --> <div class="inner"> <div class="ct-dividedButtons ct-dividedButtons--bottomMiddle"> <div class="btn-group btn-block" role="group" aria-label="..."> <button type="button" class="btn btn-primary">Student Division (8+)</button> <button type="button" class="btn btn-gray">Attend class <i class="fa fa-angle-double-right"></i></button> </div> </div> </div> </div> </div> |
JavaScript
|
1 2 |
<script src="../assets/plugins/owl/owl.carousel.js"></script> <script src="../assets/plugins/owl/init.js"></script> |
Screenshot’s
