carousel
scale[1, 2, 3]
, stageBg
, cornerDots
, revealNav
<div class="carousel"> <img src="../../../images/wallpapers/bg-4.jpg" /> <img src="../../../images/wallpapers/bg-5.jpg" /> <img src="../../../images/wallpapers/bg-6.jpg" /> <img src="../../../images/wallpapers/bg-7.jpg" /> </div>
Adding the carousel
class to a container of elements wil convert them into a carousel with the default Owl-Carousel options.
<div class="owl-carousel" id="demo-carousel-1"> <img src="../../../images/wallpapers/bg-4.jpg" /> <img src="../../../images/wallpapers/bg-5.jpg" /> <img src="../../../images/wallpapers/bg-6.jpg" /> <img src="../../../images/wallpapers/bg-7.jpg" /> </div> <script> $(document).ready(function() { $("#demo-carousel-1").owlCarousel(); }); </script>
To create a manual instance of a carousel, perhaps so you can customize the options, call the owlCarousel()
function on your element. It is recommended to use a custom ID to target your element. The script can either be placed inline as in the above example (making sure it is inside a document.ready function), or can be placed in an external scrpit.
<div class="carousel-cornerDots owl-carousel" id="demo-carousel-2"> <img src="../../../images/wallpapers/bg-4.jpg" /> <img src="../../../images/wallpapers/bg-5.jpg" /> <img src="../../../images/wallpapers/bg-6.jpg" /> <img src="../../../images/wallpapers/bg-7.jpg" /> </div> <script> $(document).ready(function() { $("#demo-carousel-2").owlCarousel({ items : 1 }); }); </script>
Manually create a carousel as shown previously, except this time your element needs to use the carousel
module with the cornerDots
modifier: carousel-cornerDots
<div class="carousel-revealNav owl-carousel" id="demo-carousel-3"> <img src="../../../images/wallpapers/bg-4.jpg" /> <img src="../../../images/wallpapers/bg-5.jpg" /> <img src="../../../images/wallpapers/bg-6.jpg" /> <img src="../../../images/wallpapers/bg-7.jpg" /> </div> <script> $(document).ready(function() { $("#demo-carousel-3").owlCarousel({ items : 1, nav : true, navText : [ '<i class="fa fa-angle-left fa-3x"></i>', '<i class="fa fa-angle-right fa-3x"></i>' ], }); }); </script>
Where possilbe, Kayzen makes use of native plugin features to minimize the load of local resources. The above jQuery code is straight from the Owl-Carousel documentation, using FontAwesome icons for the previous and next arrows.
<div class="carousel-cornerDots-revealNav owl-carousel" id="demo-carousel-4"> <img src="../../../images/wallpapers/bg-4.jpg" /> <img src="../../../images/wallpapers/bg-5.jpg" /> <img src="../../../images/wallpapers/bg-6.jpg" /> <img src="../../../images/wallpapers/bg-7.jpg" /> </div> <script> $(document).ready(function() { $("#demo-carousel-4").owlCarousel({ items : 1, nav : true, navText : [ '<i class="fa fa-angle-left fa-3x"></i>', '<i class="fa fa-angle-right fa-3x"></i>' ], }); }); </script>
The same as the previous exaple except this time the carousel
module has both the cornerDots
and revealNav
modifiers, resulting in the class carousel-cornerDots-revealNav
. You can easily change the HTML for the next/previous arrows by editing the navText
option in the above code.
<div class="carousel-stageBg owl-carousel" id="demo-carousel-5"> <img src="../../../images/wallpapers/bg-4.jpg" /> <img src="../../../images/wallpapers/bg-5.jpg" /> <img src="../../../images/wallpapers/bg-6.jpg" /> <img src="../../../images/wallpapers/bg-7.jpg" /> </div> <script> $(document).ready(function() { $("#demo-carousel-5").owlCarousel(); }); </script>
This is useful for visually seperating the carousel from other content when the carousel has less slides than it's suited for, as in the above example. Use the stageBg
modifier on the carousel
module: carousel-stageBg
.
<div class="carousel-scale-2 owl-carousel" id="demo-carousel-6"> <img src="../../../images/wallpapers/bg-4.jpg" /> <img src="../../../images/wallpapers/bg-5.jpg" /> <img src="../../../images/wallpapers/bg-6.jpg" /> <img src="../../../images/wallpapers/bg-7.jpg" /> </div> <script> ... </script>
To create a carousel with a scaled centered slide, the scale-X
modifier is used, where X
is an integer between 1 and 3, with each one offering a different size (with 1 being the smallest): carousel-scale-2
The jQuery for this carousel is slightly more compilcated than the previous examples, but it's still nothing you can't simply copy/paste:
$(document).ready(function() { var $scaleCarousel = $("#demo-carousel-6"); $scaleCarousel.owlCarousel({ center: true, loop: true }).on('click', '.owl-item', function(e) { var carousel = $scaleCarousel.data('owl.carousel'); e.preventDefault(); carousel.to(carousel.relative($(this).index())); }); });
The carousels can be customized using the following options:
Property Name | Default Value | Description |
---|---|---|
scale-1-size |
1.1 |
The scale of the centered item when using the scale-1 modifer. |
scale-2-size |
1.25 |
The scale of the centered item when using the scale-2 modifer. |
scale-3-size |
1.4 |
The scale of the centered item when using the scale-3 modifer. |
stage-background |
color('greyscale', 'grey-3') |
The background color of the carousel stage when using the stageBg modifier. |
To change one of the above values, pass your new value(s) to the carousels()
mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).
@include carousels(( 'scale-1-size' : 1.2, 'scale-2-size' : 1.4, 'scale-3-size' : 1.6 ));