sovsem-nub,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
@import url("https://fonts.googleapis.com/css?family=Montserrat");
* {
box-sizing: border-box;
}
body {
height: 100%;
background: #efefef;
color: #333;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
text-align: center;
letter-spacing: 0.15em;
font-size: 18px;
}
.slider {
position: relative;
margin: 20px auto;
width: 400px;
height: 300px;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.wrapper {
overflow: hidden;
position: relative;
background: #222;
z-index: 1;
}
.items {
width: 10000px;
position: relative;
top: 0;
left: -400px;
}
.items.shifting {
transition: left .2s ease-out;
}
.slide {
width: 400px;
height: 300px;
cursor: pointer;
float: left;
display: flex;
flex-direction: column;
justify-content: center;
transition: all 1s;
position: relative;
background: #FFCF47;
}
.slider.loaded .slide:nth-child(2),
.slider.loaded .slide:nth-child(7) {
background: #FFCF47;
}
.slider.loaded .slide:nth-child(1),
.slider.loaded .slide:nth-child(6) {
background: #7ADCEF;
}
.slider.loaded .slide:nth-child(3) {
background: #F97C68;
}
.slider.loaded .slide:nth-child(4) {
background: #a78df5;
}
.slider.loaded .slide:nth-child(5) {
background: #ff8686;
}
.control {
position: absolute;
top: 50%;
width: 40px;
height: 40px;
background: #fff;
border-radius: 20px;
margin-top: -20px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
z-index: 2;
}
.prev,
.next {
background-size: 22px;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
.prev {
background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronLeft-512.png);
left: -20px;
}
.next {
background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronRight-512.png);
right: -20px;
}
.prev:active,
.next:active {
transform: scale(0.8);
}
</style>
</head>
<body>
<div class="slider">
<div class="wrapper">
<div id="items" class="items">
<span class="slide">Slide 1</span>
<span class="slide">Slide 2</span>
<span class="slide">Slide 3</span>
<span class="slide">Slide 4</span>
<span class="slide">Slide 5</span>
</div>
</div>
<a class="control prev"></a>
<a class="control next"></a>
</div>
<div class="slider">
<div class="wrapper">
<div class="items">
<span class="slide">Slide 1</span>
<span class="slide">Slide 2</span>
<span class="slide">Slide 3</span>
<span class="slide">Slide 4</span>
<span class="slide">Slide 5</span>
</div>
</div>
<a class="control prev"></a>
<a class="control next"></a>
</div>
<div class="slider">
<div class="wrapper">
<div class="items">
<span class="slide">Slide 1</span>
<span class="slide">Slide 2</span>
<span class="slide">Slide 3</span>
<span class="slide">Slide 4</span>
<span class="slide">Slide 5</span>
</div>
</div>
<a class="control prev"></a>
<a class="control next"></a>
</div>
<script>
document.querySelectorAll('.slider').forEach(function(slider) {
var sliderItems = slider.querySelector('.items'),
prev = slider.querySelector('.prev'),
next = slider.querySelector('.next');
slide(slider, sliderItems, prev, next);
})
function slide(wrapper, items, prev, next) {
var posX1 = 0,
posX2 = 0,
posInitial,
posFinal,
threshold = 100,
slides = items.getElementsByClassName('slide'),
slidesLength = slides.length,
slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
firstSlide = slides[0],
lastSlide = slides[slidesLength - 1],
cloneFirst = firstSlide.cloneNode(true),
cloneLast = lastSlide.cloneNode(true),
index = 0,
allowShift = true;
// Clone first and last slide
items.appendChild(cloneFirst);
items.insertBefore(cloneLast, firstSlide);
wrapper.classList.add('loaded');
// Mouse and Touch events
items.onmousedown = dragStart;
// Touch events
items.addEventListener('touchstart', dragStart);
items.addEventListener('touchend', dragEnd);
items.addEventListener('touchmove', dragAction);
// Click events
prev.addEventListener('click', function () { shiftSlide(-1) });
next.addEventListener('click', function () { shiftSlide(1) });
// Transition events
items.addEventListener('transitionend', checkIndex);
function dragStart (e) {
e = e || window.event;
e.preventDefault();
posInitial = items.offsetLeft;
if (e.type == 'touchstart') {
posX1 = e.touches[0].clientX;
} else {
posX1 = e.clientX;
document.onmouseup = dragEnd;
document.onmousemove = dragAction;
}
}
function dragAction (e) {
e = e || window.event;
if (e.type == 'touchmove') {
posX2 = posX1 - e.touches[0].clientX;
posX1 = e.touches[0].clientX;
} else {
posX2 = posX1 - e.clientX;
posX1 = e.clientX;
}
items.style.left = (items.offsetLeft - posX2) + "px";
}
function dragEnd (e) {
posFinal = items.offsetLeft;
if (posFinal - posInitial < -threshold) {
shiftSlide(1, 'drag');
} else if (posFinal - posInitial > threshold) {
shiftSlide(-1, 'drag');
} else {
items.style.left = (posInitial) + "px";
}
document.onmouseup = null;
document.onmousemove = null;
}
function shiftSlide(dir, action) {
items.classList.add('shifting');
if (allowShift) {
if (!action) { posInitial = items.offsetLeft; }
if (dir == 1) {
items.style.left = (posInitial - slideSize) + "px";
index++;
} else if (dir == -1) {
items.style.left = (posInitial + slideSize) + "px";
index--;
}
};
allowShift = false;
}
function checkIndex (){
items.classList.remove('shifting');
if (index == -1) {
items.style.left = -(slidesLength * slideSize) + "px";
index = slidesLength - 1;
}
if (index == slidesLength) {
items.style.left = -(1 * slideSize) + "px";
index = 0;
}
allowShift = true;
}
}
</script>
</body>
</html>