Показать сообщение отдельно
  #1 (permalink)  
Старый 26.10.2017, 18:10
Интересующийся
Отправить личное сообщение для Радиойод Посмотреть профиль Найти все сообщения от Радиойод
 
Регистрация: 28.07.2016
Сообщений: 11

Несколько каруселей на одной странице
День добрый.

Жажду на одной странице сделать несколько каруселей.
Код для одной такой (честно украдено с хабра):

<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. вроде же можно одно имя класса использовать для нескольких блоков...
Ответить с цитированием