<div class="c-carousel" id="image-carousel" aria-roledescription="carousel" data-carousel>
<div class="carousel-nav">
<button class="carousel-prev" aria-label="Previous slide"><span></span></button>
<button class="carousel-next" aria-label="Next slide"><span></span></button>
</div>
<div class="swipe">
<div class="swipe-wrap">
<div>
<img src="images/image.jpg" alt="">
</div>
<div>
<img src="images/image.jpg" alt="">
</div>
<div>
<img src="images/image.jpg" alt="">
</div>
</div>
</div>
<div class="carousel-dots"></div>
</div>
// Carousel initialization & options
var carousel = new Carousel(document.querySelector("#image-carousel"), {
startSlide: 0,
speed: 400,
auto: 3000,
draggable: false,
continuous: true,
disableScroll: false,
stopPropagation: false,
stopOnMouseEnter: true,
callback: function(index, elem, dir) {},
transitionEnd: function(index, elem) {}
});
// Use getSwipe to get access to swipe methods
var numSlides = carousel.getSwipe().getNumSlides();
// Required styles
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
.swipe-wrap {
overflow: hidden;
position: relative;
& > div {
float: left;
width: 100%;
position: relative;
}
}
}
// Default theme
.c-carousel {
position: relative;
.swipe-wrap {
img, video {
display: block;
width: 100%;
}
}
.carousel-dots {
text-align: center;
margin: 0 0 2em 0;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
button {
display: inline-block;
width: em(15px);
height: em(15px);
border: 1px solid #fff;
margin: 0 .2em;
border-radius: 50%;
cursor: pointer;
padding: 0;
background: none;
&.m-active {
background: #fff;
}
}
}
.carousel-nav {
position: absolute;
top: 50%;
width: 100%;
z-index: 1;
& > button {
position: absolute;
top: 0;
width: em(60px);
height: em(60px);
background: rgba(0,0,0,.2);
border-radius: 50%;
margin-top: em(-30px);
border: none;
cursor: pointer;
span {
display: inline-block;
&:before, &:after {
content: "";
background: #fff;
display: block;
}
&:before {
width: 14px;
height: 2px;
@include min($medium) {
width: 20px;
height: 2px;
}
}
&:after {
height: 14px;
width: 2px;
margin-top: -2px;
@include min($medium) {
height: 20px;
width: 2px;
}
}
}
}
}
.carousel-next {
right: 2em;
span {
position: relative;
left: em(-4px);
transform: rotate(135deg);
}
}
.carousel-prev {
left: 2em;
span {
position: relative;
left: em(4px);
transform: rotate(-45deg);
}
}
}