We use several types of sliders in {Theme}.
Main 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 |
<div class="ct-js-owl " data-animations="true" data-height="100%" data-snap-ignore="true"> <div class="item"> <hr class="hr-custom ct-js-background animated" data-fx="fadeInDown" data-bg="assets/images/hr2.png" data-bgrepeat="no-repeat"> <h2 class="ct-u-font2 text-uppercase animated" data-fx="flipInY">We love<br>coffee</h2> <p class="animated" data-fx="fadeIn">Vivamus iaculis placerat diam, laoreet posuere<br>dui aliquet ut.Praesent lacinia eleifend<br>eros, ac venenatis orci.</p> <a href="about.html" class="btn btn-lg btn-default animated" data-fx="fadeIn" data-hover="It's Delicious"><span>More about us</span></a> <hr class="hr-custom ct-js-background animated ct-u-paddingTop60" data-fx="fadeInDown" data-bg="assets/images/hr2.png" data-bgrepeat="no-repeat"> </div> <div class="item"> <hr class="hr-custom ct-js-background animated" data-fx="fadeInDown" data-bg="assets/images/hr2.png" data-bgrepeat="no-repeat"> <h2 class="ct-u-font2 text-uppercase animated" data-fx="flipInY">Coffee<br>& Breakfast</h2> <p class="animated" data-fx="fadeIn"> Donec fermentum eros at mauris mollis tincidunt.<br>Sed sit amet bibendum tellus, non commodo lacus.</p> <a href="menu.html" class="btn btn-lg btn-default animated" data-fx="fadeIn" data-hover="It's Delicious"><span>See our menu</span></a> <hr class="hr-custom ct-js-background animated ct-u-paddingTop60" data-fx="fadeInDown" data-bg="assets/images/hr2.png" data-bgrepeat="no-repeat"> </div> <div class="item"> <hr class="hr-custom ct-js-background animated" data-fx="fadeInDown" data-bg="assets/images/hr2.png" data-bgrepeat="no-repeat"> <h2 class="ct-u-font2 text-uppercase animated" data-fx="flipInY">Catering service</h2> <p class="animated" data-fx="fadeIn">Aliquam erat volutpat. Morbi nisl nibh, interdum<br> vitae ultricies vitae, lobortis sit amet tellus<br> mauris dolor velit.</p> <a href="menu.html" class="btn btn-lg btn-default animated" data-fx="fadeIn" data-hover="It's Delicious"><span>Get an estimate</span></a> <hr class="hr-custom ct-js-background animated ct-u-paddingTop60" data-fx="fadeInDown" data-bg="assets/images/hr2.png" data-bgrepeat="no-repeat"> </div> </div> |
Gallery
HTML markup:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="ct-js-owl ct-js-popupGallery" data-items="2" data-single="false" data-navigation="true" data-pagination="false" data-lgItems="2" data-mdItems="2" data-smItems="1"> <div class="item ct-u-padding10"> <a href="assets/images/demo-content/gallery-full-1.jpg" class="ct-js-popup ct-gallerySlider-image" title="The Croissants"><img src="assets/images/demo-content/gallery-thumb-1.jpg" alt="thumbnail"></a> <a href="assets/images/demo-content/gallery-full-2.jpg" class="ct-js-popup ct-gallerySlider-image" title="The Space"><img src="assets/images/demo-content/gallery-thumb-2.jpg" alt="thumbnail"></a> </div> <div class="item ct-u-padding10"> <a href="assets/images/demo-content/gallery-full-3.jpg" class="ct-js-popup ct-gallerySlider-image" title="The Lamps"><img src="assets/images/demo-content/gallery-thumb-3.jpg" alt="thumbnail"></a> <a href="assets/images/demo-content/gallery-full-4.jpg" class="ct-js-popup ct-gallerySlider-image" title="The Coffee"><img src="assets/images/demo-content/gallery-thumb-4.jpg" alt="thumbnail"></a> </div> <div class="item ct-u-padding10"> <a href="assets/images/demo-content/gallery-full-5.jpg" class="ct-js-popup ct-gallerySlider-image" title="The balcon"><img src="assets/images/demo-content/gallery-thumb-5.jpg" alt="thumbnail"></a> <a href="assets/images/demo-content/gallery-full-6.jpg" class="ct-js-popup ct-gallerySlider-image" title="The bread"><img src="assets/images/demo-content/gallery-thumb-6.jpg" alt="thumbnail"></a> </div> </div> |
Gallery Simple
HTML markup:
1 2 3 4 5 |
<div class="ct-js-owl ct-gallery--shaddow" data-animations="true" data-height="100%"> <div class="item"><img src="assets/images/demo-content/blog-gallery-1.jpg" alt="Gallery Blog Image" /></div> <div class="item"><img src="assets/images/demo-content/blog-gallery-2.jpg" alt="Gallery Blog Image" /></div> <div class="item"><img src="assets/images/demo-content/blog-gallery-3.jpg" alt="Gallery Blog Image" /></div> </div> |
Notice:
To use any of the following sliders you need to include javascript, which can be found here.