День добрый.
Жажду на одной странице сделать несколько каруселей.
Код для одной такой (честно украдено с хабра):
<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>
(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": ".js-carousel",
"wrap": ".js-carousel__wrap",
"prev": ".js-carousel__prev",
"next": ".js-carousel__next"
});
})();
Если вставлять второй блок, то он уже не будет прокручиваться.
P.S. вроде же можно одно имя класса использовать для нескольких блоков...