Carousel

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