Shop 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 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<div class="ct-articleBox ct-js-slick ct-slick-arrow-3 ct-slick-arrow-3--rightTop ct-u-marginBottom60" data-animations="true" data-autoplay="true" data-autoplaySpeed="9000" data-arrows="true" data-items="1"> <div class="item"> <div class="ct-articleBox-media"> <img src="assets/images/shop-slider.jpg" alt=""/> <span class="ct-link"><a href="#">12</a></span> <div class="media animated" data-fx="slideInLeft"> <div class="media-left"> //Article info box --> <div class="media-object ct-articleBox-info"> <div class="info-1">990$</div> <div class="info-2"><a href="#">BUY</a></div> </div> //Article info box <-- </div> <div class="media-body"> <h3 class="media-heading ct-u-paddingBottom10 ct-fw-600">No one would have believed in</h3> <p> No one would have believed in the last years of the nine- teenth century that this world was being. </p> </div> </div> </div> </div> <div class="item"> <div class="ct-articleBox-media"> <img src="assets/images/shop-slider-2.jpg" alt=""/> <span class="ct-link"><a href="#">23</a></span> <div class="media animated" data-fx="slideInLeft"> <div class="media-left"> //Article info box --> <div class="media-object ct-articleBox-info"> <div class="info-1">1000$</div> <div class="info-2"><a href="#">BUY</a></div> </div> //Article info box <-- </div> <div class="media-body"> <h3 class="media-heading ct-u-paddingBottom10 ct-fw-600">No one would have believed in</h3> <p> No one would have believed in the last years of the nine- teenth century that this world was being. </p> </div> </div> </div> </div> </div> |
.ct-articleBox: Base class for article.
.ct-articleBox-media: Images,Videos for article.
.ct-js-slick: class for slick slider.
.ct-articleBox-info : article info box wrapper.
.info-1 : ‘.ct-articleBox-info’ subclass.
.info-2 : ‘.ct-articleBox-info’ subclass.
NAVIGATION PLACEMENT – change where sliders navigation should be displayed by adding one of the following CSS classes to HTML markup:
- .ct-slick-arrow-1,
- .ct-slick-arrow-1–above,
- .ct-slick-arrow-2,
- .ct-slick-arrow-3,
- .ct-slick-arrow-3–leftTop,
- .ct-slick-arrow-3–leftBottom,
- .ct-slick-arrow-3–rightTop,
- .ct-slick-arrow-3–rightBottom,
- .ct-slick-arrow-3–under