Carousel

This Carousel is utilizes Slick carousel and adds custom functionality.

Setup

npm login
npm install @borngroup/born-carousel

You will need to get the npm acount info from the account owner.

Usage

@import Carousel from '@borngroup/born-carousel';
let carousel = new Carousel([options]);

Settings

@import Carousel from '@borngroup/born-carousel';
let carousel = new Carousel;

HTML

<div class="carousel" data-slick='{"autoplay": true}'>
    <div class="carousel__item">
        <div class="carousel__bg" style="background-image:url('https://placeimg.com/1440/530/people/grayscale?3')"></div>

        <div class="carousel__details row">
            <div class="col-xs-12 col-md-5 col-lg-4">
                <div class="carousel__details__copy">

                    <h3 class="heading heading--small carousel__eyebrow sans txt--normal">
                        The Cover Shoot
                    </h3>

                    <h2 class="heading heading--main serif carousel__heading">
                        <a class="link--opaque" href="#" title="Evening Luxe" tabindex="-1">
                            Evening Luxe
                        </a>
                    </h2>

                    <p class="carousel__description p3 serif">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias tenetur ea laudantium explicabo odit ratione omnis?
                    </p>

                    <a class="cta icon--angle-right icon--outside" href="#" title="Shop Now" tabindex="-1">
                        Shop Now
                    </a>
                </div>
            </div>
        </div>
    </div>                
</div>