There are no notes for this item.
<div class="container">
<div class="carousel">
<div style="background: url(/media/hero.jpg) no-repeat center top/cover;">
<h2>Carousel Slide 1</h2>
<p>
Adipisicing neque excepturi pariatur maiores magnam beatae corporis harum esse id. Perspiciatis corrupti voluptate recusandae.
</p>
<p>
Elit ea dignissimos quis in iste fuga ut.
</p>
<a class="button" href="">Learn More</a>
</div>
<div style="background: url(/media/hero.jpg) no-repeat center top/cover;">
<h2>Carousel Slide 2</h2>
<p>
Elit aliquid et saepe eaque blanditiis. Corporis quisquam laborum similique ipsam aut. Nihil soluta dolorem.
</p>
<p>
Adipisicing voluptas sequi sequi quis nostrum? Ipsum adipisci.
</p>
<a class="button" href="">Learn Less</a>
</div>
<div style="background: url(/media/hero.jpg) no-repeat center top/cover;">
<h2>Carousel Slide 3</h2>
<p>
Ipsum error cum veniam est unde. Illum nihil deserunt velit culpa animi quia fuga ad.
</p>
<p>
Adipisicing voluptatem voluptate consequuntur porro debitis temporibus fugiat.
</p>
<a class="button" href="">Learn Sass</a>
</div>
</div>
</div>
$(function () {
$('.carousel').slick({
dots: true,
})
})
///
/// CAROUSEL uses Slick to create a carousel. It defaults to a rather
/// basic, one-slide-at-a-time implementation with dots, but slick supports a
/// good deal of configuration including showing multiple slides, breakpoints,
/// syncing between slides, and plenty of javascript events and methods for
/// integration.
///
/// The implementation on Boilerplate is using a CDN to provide
///
/// + slick.css
/// + slick-theme.css
/// + slick.min.js
///
/// See http://kenwheeler.github.io/slick/ for more information.
///
/// The carousel() mixin should be included on a parent element that contains
/// one div per slide. No additional classes are necessary – the slick classes
/// referenced are added dynamically by slick.
///
@mixin carousel() {
.slick-slide {
color: #FFF;
height: auto;
padding: 3rem;
}
.slick-prev,
.slick-next {
z-index: 1;
}
.slick-prev {
left: 2rem;
}
.slick-next {
right: 2rem;
}
}