<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="carousel">
<div class="nav nav-left">
<div class="ion-chevron-left carousel-arrow-icon-left"></div>
</div>
<div class="carousel-content">
<div class="slide slide-1">
<div>cat</div>
</div>
<div class="slide slide-2">
<div>dog</div>
</div>
<div class="slide slide-3">
<div>mouse</div>
</div>
<div class="slide slide-4">
<div>hen</div>
</div>
<div class="slide slide-5">
<div>bug</div>
</div>
</div>
<div class="nav nav-right">
<div class="ion-chevron-right carousel-arrow-icon-right"></div>
</div>
</div>
</div>
<script>
var carousel = document.querySelector('.carousel');
var carouselContent = document.querySelector('.carousel-content');
var slides = document.querySelectorAll('.slide');
var arrayOfSlides = Array.prototype.slice.call(slides);
var carouselDisplaying;
var screenSize;
setScreenSize();
var lengthOfSlide;
function addClone() {
var lastSlide = carouselContent.lastElementChild.cloneNode(true);
lastSlide.style.left = (-lengthOfSlide) + "px";
carouselContent.insertBefore(lastSlide, carouselContent.firstChild);
}
// addClone();
function removeClone() {
var firstSlide = carouselContent.firstElementChild;
firstSlide.parentNode.removeChild(firstSlide);
}
function moveSlidesRight() {
var slides = document.querySelectorAll('.slide');
var slidesArray = Array.prototype.slice.call(slides);
var width = 0;
slidesArray.forEach(function(el, i){
el.style.left = width + "px";
width += lengthOfSlide;
});
addClone();
}
moveSlidesRight();
function moveSlidesLeft() {
var slides = document.querySelectorAll('.slide');
var slidesArray = Array.prototype.slice.call(slides);
slidesArray = slidesArray.reverse();
var maxWidth = (slidesArray.length - 1) * lengthOfSlide;
slidesArray.forEach(function(el, i){
maxWidth -= lengthOfSlide;
el.style.left = maxWidth + "px";
});
}
window.addEventListener('resize', setScreenSize);
function setScreenSize() {
if ( window.innerWidth >= 500 ) {
carouselDisplaying = 3;
} else if ( window.innerWidth >= 300 ) {
carouselDisplaying = 2;
} else {
carouselDisplaying = 1;
}
getScreenSize();
}
function getScreenSize() {
var slides = document.querySelectorAll('.slide');
var slidesArray = Array.prototype.slice.call(slides);
lengthOfSlide = ( carousel.offsetWidth / carouselDisplaying );
var initialWidth = -lengthOfSlide;
slidesArray.forEach(function(el) {
el.style.width = lengthOfSlide + "px";
el.style.left = initialWidth + "px";
initialWidth += lengthOfSlide;
});
}
var rightNav = document.querySelector('.nav-right');
rightNav.addEventListener('click', moveLeft);
var moving = true;
function moveRight() {
if ( moving ) {
moving = false;
var lastSlide = carouselContent.lastElementChild;
lastSlide.parentNode.removeChild(lastSlide);
carouselContent.insertBefore(lastSlide, carouselContent.firstChild);
removeClone();
var firstSlide = carouselContent.firstElementChild;
firstSlide.addEventListener('transitionend', activateAgain);
moveSlidesRight();
}
}
function activateAgain() {
var firstSlide = carouselContent.firstElementChild;
moving = true;
firstSlide.removeEventListener('transitionend', activateAgain);
}
var leftNav = document.querySelector('.nav-left');
leftNav.addEventListener('click', moveRight);
// var moveLeftAgain = true;
function moveLeft() {
if ( moving ) {
moving = false;
removeClone();
var firstSlide = carouselContent.firstElementChild;
firstSlide.addEventListener('transitionend', replaceToEnd);
moveSlidesLeft();
}
}
function replaceToEnd() {
var firstSlide = carouselContent.firstElementChild;
firstSlide.parentNode.removeChild(firstSlide);
carouselContent.appendChild(firstSlide);
firstSlide.style.left = ( (arrayOfSlides.length -1) * lengthOfSlide) + "px";
addClone();
moving = true;
firstSlide.removeEventListener('transitionend', replaceToEnd);
}
carouselContent.addEventListener('mousedown', seeMovement);
var initialX;
var initialPos;
function seeMovement(e) {
initialX = e.clientX;
getInitialPos();
carouselContent.addEventListener('mousemove', slightMove);
document.addEventListener('mouseup', moveBasedOnMouse);
}
function slightMove(e) {
if ( moving ) {
var movingX = e.clientX;
var difference = initialX - movingX;
if ( Math.abs(difference) < (lengthOfSlide/4) ) {
slightMoveSlides(difference);
}
}
}
function getInitialPos() {
var slides = document.querySelectorAll('.slide');
var slidesArray = Array.prototype.slice.call(slides);
initialPos = [];
slidesArray.forEach(function(el){
var left = Math.floor( parseInt( el.style.left.slice(0, -2 ) ) );
initialPos.push( left );
});
}
function slightMoveSlides(newX) {
var slides = document.querySelectorAll('.slide');
var slidesArray = Array.prototype.slice.call(slides);
slidesArray.forEach(function(el, i){
var oldLeft = initialPos[i];
el.style.left = (oldLeft + newX) + "px";
});
}
function moveBasedOnMouse(e) {
var finalX = e.clientX;
if ( initialX - finalX > 0) {
moveRight();
} else if ( initialX - finalX < 0 ) {
moveLeft();
}
document.removeEventListener('mouseup', moveBasedOnMouse);
carouselContent.removeEventListener('mousemove', slightMove);
}
</script>
*,
*:before,
*:after {
box-sizing: border-box;
}
.carousel {
position: relative;
width: 50%;
height: 50px;
margin: 0 auto;
}
.carousel-content {
position: relative;
overflow: hidden;
transition: width .4s;
height: 100%;
}
.slide {
height: 100%;
background-color: black;
position: absolute;
z-index: 1;
transition: left .4s cubic-bezier(.47,.13,.15,.89);
}
.slide-2 {
background-color: green;
}
.slide-3 {
background-color: red;
}
.slide-4 {
background-color: purple;
}
.slide-5 {
background-color: yellow;
}
.nav {
position: absolute;
top: 50%;
margin-top: -10px;
background-color: rgba(150,150,150,.3);
width: 20px;
height: 20px;
z-index: 2;
cursor: pointer;
border-radius: 50%;
border: none;
outline: none;
color: white;
-webkit-user-select: none;
}
.nav-left {
left: -25px;
}
.nav-right {
right: -25px;
}
.carousel-arrow-icon-left {
margin-left: 5px;
margin-top: 2px;
}
.carousel-arrow-icon-right {
margin-left: 7px;
margin-top: 2px;
}
