Радиойод,
Карусель на Vanilla.JS
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.b-carousel {
width: 100%;
overflow: hidden;
position: relative;
box-sizing: border-box;
border: 1px solid;
}
.b-carousel__prev,
.b-carousel__next {
position: absolute;
top: 50%;
left: 20px;
width: 50px;
height: 50px;
background: #fff;
transform: translateY(-50%) translateZ(0);
cursor: pointer;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
z-index: 3;
}
.b-carousel__next {
left: auto;
right: 20px;
}
.b-carousel__wrap {
display: flex;
transition: transform .5s;
will-change: transform;
position: relative;
z-index: 1;
height: 100%;
}
.b-carousel__item {
flex: 0 0 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.b-carousel__img {
width: 100%;
display: block;
}
</style>
</head>
<body>
<div class="wrap">
<div class="b-carousel js-carousel">
<button class="b-carousel__prev js-carousel__prev"><</button>
<button class="b-carousel__next js-carousel__next">></button>
<div class="b-carousel__wrap js-carousel__wrap">
<div class="b-carousel__item">
<img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2014/06/%D1%81%D0%BE%D0%B1%D0%B0%D1%87%D0%BA%D0%B0.jpg?resize=350%2C200" alt="" class="b-carousel__img">
</div>
<div class="b-carousel__item">
<img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2015/08/%D0%9C%D0%B8%D0%BB%D1%8B%D0%B5-%D0%B6%D0%B8%D0%B2%D0%BE%D1%82%D0%BD%D1%8B%D0%B5....jpg?resize=350%2C200" alt="" class="b-carousel__img">
</div>
<div class="b-carousel__item">
<img src="https://images.unsplash.com/photo-1422303497846-57188833cbe1?w=500" alt="" class="b-carousel__img">
</div>
<div class="b-carousel__item">
<img src="https://images.unsplash.com/44/MIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg?w=500" alt="" class="b-carousel__img">
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="b-carousel js-carousel">
<button class="b-carousel__prev js-carousel__prev"><</button>
<button class="b-carousel__next js-carousel__next">></button>
<div class="b-carousel__wrap js-carousel__wrap">
<div class="b-carousel__item">
<img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2014/06/%D1%81%D0%BE%D0%B1%D0%B0%D1%87%D0%BA%D0%B0.jpg?resize=350%2C200" alt="" class="b-carousel__img">
</div>
<div class="b-carousel__item">
<img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2015/08/%D0%9C%D0%B8%D0%BB%D1%8B%D0%B5-%D0%B6%D0%B8%D0%B2%D0%BE%D1%82%D0%BD%D1%8B%D0%B5....jpg?resize=350%2C200" alt="" class="b-carousel__img">
</div>
<div class="b-carousel__item">
<img src="https://images.unsplash.com/photo-1422303497846-57188833cbe1?w=500" alt="" class="b-carousel__img">
</div>
<div class="b-carousel__item">
<img src="https://images.unsplash.com/44/MIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg?w=500" alt="" class="b-carousel__img">
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="b-carousel js-carousel">
<button class="b-carousel__prev js-carousel__prev"><</button>
<button class="b-carousel__next js-carousel__next">></button>
<div class="b-carousel__wrap js-carousel__wrap">
<div class="b-carousel__item">
<img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2014/06/%D1%81%D0%BE%D0%B1%D0%B0%D1%87%D0%BA%D0%B0.jpg?resize=350%2C200" alt="" class="b-carousel__img">
</div>
<div class="b-carousel__item">
<img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2015/08/%D0%9C%D0%B8%D0%BB%D1%8B%D0%B5-%D0%B6%D0%B8%D0%B2%D0%BE%D1%82%D0%BD%D1%8B%D0%B5....jpg?resize=350%2C200" alt="" class="b-carousel__img">
</div>
<div class="b-carousel__item">
<img src="https://images.unsplash.com/photo-1422303497846-57188833cbe1?w=500" alt="" class="b-carousel__img">
</div>
<div class="b-carousel__item">
<img src="https://images.unsplash.com/44/MIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg?w=500" alt="" class="b-carousel__img">
</div>
</div>
</div>
</div>
<script>
(function() {
"use strict";
function Carousel(setting) {
if(document.querySelector(setting.wrap) === null) {
console.error(`Carousel not fount selector ${setting.wrap}`);
return;
}
/* Scope privates methods and properties */
let privates = {};
/* Public methods */
// Prev slide
this.prev_slide = () => {
--privates.opt.position;
if(privates.opt.position < 0) {
privates.sel.wrap.classList.add('s-notransition');
privates.opt.position = privates.opt.max_position - 1;
}
privates.sel.wrap.style["transform"] = `translateX(-${privates.opt.position}00%)`;
};
// Next slide
this.next_slide = () => {
++privates.opt.position;
if(privates.opt.position >= privates.opt.max_position) {
privates.opt.position = 0;
}
privates.sel.wrap.style["transform"] = `translateX(-${privates.opt.position}00%)`;
};
/* Privates properties */
privates.setting = setting;
privates.sel = {
"main": document.querySelector(privates.setting.main),
"wrap": document.querySelector(privates.setting.wrap),
"children": document.querySelector(privates.setting.wrap).children,
"prev": document.querySelector(privates.setting.prev),
"next": document.querySelector(privates.setting.next)
};
privates.opt = {
"position": 0,
"max_position": document.querySelector(privates.setting.wrap).children.length
};
// Control
if(privates.sel.prev !== null) {
privates.sel.prev.addEventListener('click', () => {
this.prev_slide();
});
}
if(privates.sel.next !== null) {
privates.sel.next.addEventListener('click', () => {
this.next_slide();
});
}
}
let a = new Carousel({
"main": ".wrap:nth-of-type(1) .js-carousel",
"wrap": ".wrap:nth-of-type(1) .js-carousel__wrap",
"prev": ".wrap:nth-of-type(1) .js-carousel__prev",
"next": ".wrap:nth-of-type(1) .js-carousel__next"
});
let b = new Carousel({
"main": ".wrap:nth-of-type(2) .js-carousel",
"wrap": ".wrap:nth-of-type(2) .js-carousel__wrap",
"prev": ".wrap:nth-of-type(2) .js-carousel__prev",
"next": ".wrap:nth-of-type(2) .js-carousel__next"
});
let c = new Carousel({
"main": ".wrap:nth-of-type(3) .js-carousel",
"wrap": ".wrap:nth-of-type(3) .js-carousel__wrap",
"prev": ".wrap:nth-of-type(3) .js-carousel__prev",
"next": ".wrap:nth-of-type(3) .js-carousel__next"
});
})();
</script>
</body>
</html>