Files

• _earth-slider.scss
• earth-slider.js
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/objects/earth-slider

Module Overview

Examples

<section class="section earth-slider">
    <header class="earth-slider_section heading_group-block text-center">
        <div class="container-small">
            ...
        </div>
    </header>
    ...
    <div class="earth-wrapper">
        <div class="earth">               
            <img class="globe" src="../../../assets/images/earth.png" alt="" />
            <div class="pins">
                <div class="pin-wrapper">
                    <div class='pin'></div>
                </div>
                <div class="pin-wrapper">
                    <div class='pin'></div>
                </div>
                <div class="pin-wrapper">
                    <div class='pin'></div>
                </div>
            </div>
        </div>
    </div>
    <nav class="slide-nav">
        <button class="slide-prev icon-border-size-4"><i class="fa fa-angle-left"></i></button>
        <button class="slide-next icon-border-size-4"><i class="fa fa-angle-right"></i></button>
    </nav>
</section>

$('.earth-slider').KayzenEarthSlider();

View Demo

Custom Starting Section

$('.earth-slider').KayzenEarthSlider({
    startingSection : 1
});

Customizing

The Earth Slider can be customized using the following options:

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

To change one of the above values, pass your new value(s) to the earth-slider() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include earth-slider((
    'globe-spin-duration' : 45s,
    'pin-size'            : 40px
));