Kayzen

Sliders/Carousels

assets/modules/elements/carousels

Files

  • _carousels.scss
  • README.md

The 'carousels' module makes use of the owl-carousel plugin which is built into app.js.

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/elements/carousels

Module Overview

  • Name: carousel
  • Components: null
  • Modifiers: scale[1, 2, 3], stageBg, cornerDots, revealNav

Examples

<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.

Manual Init


<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.

It is a requirement of Owl-Carousel to have the class 'owl-carousel' on the element on which you are calling the owlCarousel() function.

Carousel With Corner Dots


<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

Carousel With Revealing Next/Prev Arrows (Hint: hover the carousel)


<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.

Carousel With Corner Dots & Revealing Next/Prev 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.

Carousel With Colored Stage


<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.

Scaled Centered Slide


<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()));
    });

});

Customizing

The carousels can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

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
));