There are three available types of sliders:
Main slider
Main Slider
You can use it with the following 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 |
<div class="ct-js-owl owl-carousel ct-mainCarousel ct-mainCarousel--arrowsMiddle" data-pagination="false" data-items="1" data-autoPlay="false" data-bg="true" data-animations="true" data-height="525" data-navigation="true"> <div class="item" data-bg="./assets/images/demo-content/slider-image.jpg"> <div class="inner"> <div class="container"> <div class="row"> <div class="col-sm-12 text-center"> <h1 class="ct-u-colorBlack"> <span class="animated" data-fx="fadeIn">Customized Diamond</span> <br> <span class="ct-u-colorWhite animated" data-fx="fadeIn" data-time="200">& Wedding Rings</span></h1> <div class="text-center ct-u-paddingTop15 ct-u-paddingBottom30"> <hr class="hr-slider animated" data-fx="fadeIn"> </div> <div class="text-center"> <a class="btn btn-blackTransparent animated" data-fx="fadeInUp" href="#" role="button">Browse Collection <i class="fa fa-angle-double-right"></i></a> </div> </div> </div> </div> <a href="#" class="ct-btn-shadowBar text-left animated" data-fx="fadeInUp"> <div class="container"> <i class="fa fa-angle-right fa-fw"></i> View all Nickelodeon Offers </div> </a> </div> </div> |
We have few variations of the arrows:
- ct-mainCarousel–arrowsTop
- ct-mainCarousel–arrowsMiddle
- ct-mainCarousel–arrowsTopRight
- ct-mainCarousel–arrowsTopLeft
- ct-mainCarousel–arrowsTopCenter
Product Slider
Product Slider
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="ct-js-owl owl-carousel ct-productCarousel ct-productCarousel--arrowsTop" data-single="false" data-pagination="false" data-navigation="true" data-items="4"> <div class="owl-item"> <div class="ct-productShop ct-productShop--zoom"> <div class="ct-productShop-category"> <span class="ct-productShop-h5">Rings</span> <div class="clearfix"></div> <img class="ct-js-zoomImage" src="./assets/images/demo-content/featured-item1.jpg" data-zoom-image="assets/images/demo-content/featured-item1-large.jpg" alt=""> </div> <div class="ct-productShop-content"> <div class="ct-productShop-content-description"> <a href="single-product.html"> <h3>Aaron basha 18K White Yellows Pink Enamel Flower</h3> <span><del>450.99</del> $318.00</span> </a> <span class="ct-productShop-shopCart"> <a class="btn btn-default" href="#" role="button"><i class="fa fa-shopping-cart fa-fw"></i></a> <a class="btn btn-default btn-hidden" href="#" role="button"><i class="fa fa-chain fa-fw"></i></a> </span> </div> </div> </div> </div> |
With the following variations of arrows:
- ct-productCarousel–arrowsTop
- ct-productCarousel–arrowsTopRight
PersonBox Slider
PersonBox Slider
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="ct-js-owl owl-carousel text-center" data-single="false" data-pagination="false" data-autoPlay="true"> <div class="owl-item"> <div class="ct-personBox"> <a href="team-member.html"> <div class="ct-personBox-image"> <img src="assets/images/demo-content/team-member1.jpg" alt="Team Member 1"> <div class="ct-personBox-image-link"> <i class="fa fa-long-arrow-right ct-u-colorWhite"></i> </div> <div class="ct-personBox-bottomBar"></div> </div> </a> <div class="ct-u-paddingTop15 ct-u-paddingBottom10 text-left"> <ul class="ct-socials ct-socials--medium ct-socials--black ct-socials--blackBorder list-inline list-unstyled"> <li><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a></li> <li><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a> </ul> </div> <div class="ct-u-size18 ct-u-paddingBottom5 ct-personBox-name text-left"><a href="team-member.html">Margarite Jencons</a></div> <div class="ct-fs-i ct-u-size15 ct-u-colorLighterGrey text-left">Jewelry Professional</div> </div> </div> |
Remember to attach the following, required javascript files for owl slider: