Добрый день!
Вопрос про инициализацию слайдера. Написал простенький слайдер, который работает, но таких слайдеров нужно 2, а может и больше на одной страничке.
Как их разграничить правильнее, сейчас все действия выполняются на последнем слайдере если их размещено 2 и более.
gallery.bemjson.js
{
block:'show-gallery',
js:{step:4},
content:[
{
elem:'holder',
},
{
elem:'dop-foto',
content:[
{
elem:'control-next',
content:''
},
{
elem:'control-prev',
content:''
},
{
elem:'list-outer',
content:[
{
elem:'list',
tag:'ul',
content:[
{
elem:'item',
block:'show-gallery',
js:{slideid:1, slide:1, src:'images/show_max_2.jpg'},
tag:'li',
content:[
{
block:'image',
tag:'img',
url: 'images/show_mini_2.jpg',
}
]
},
{
elem:'item',
block:'show-gallery',
js:{slideid:1, slide:2, src:'images/show_max_1.jpg'},
tag:'li',
content:[
{
block:'image',
tag:'img',
url: 'images/show_mini_1.jpg',
}
]
},
{
elem:'item',
block:'show-gallery',
js:{slideid:1, slide:3, src:'images/show_max_3.jpg'},
tag:'li',
content:[
{
block:'image',
tag:'img',
url: 'images/show_mini_3.jpg',
}
]
},
{
elem:'item',
block:'show-gallery',
js:{slideid:1, slide:1, src:'images/show_max_4.jpg'},
tag:'li',
content:[
{
block:'image',
tag:'img',
url: 'images/show_mini_4.jpg',
}
]
},
{
elem:'item',
block:'show-gallery',
js:{slideid:1, slide:1, src:'images/show_max_5.jpg'},
tag:'li',
content:[
{
block:'image',
tag:'img',
url: 'images/show_mini_5.jpg',
}
]
},
]
}
]
}
]
},
show-gallery.js
modules.define('show-gallery', ['i-bem-dom','jquery', 'BEMHTML' ], function(provide, bemDom,$, BEMHTML) {
provide(bemDom.declBlock(this.name, {
onSetMod: {
'js': {
'inited': function() {
console.log('Слайдер инициализирован')
var domElem = this.domElem;
counter = 0;
holderMain = this._elem('holder');
innerBl = this._elem('list-outer');
slides = this._elem('list');
slide = this._elem('item');
step = this.params.step;
position = 0;
console.log('Шаг слайдера', step);
//Ширина блока под фотографию главную
this.holderMainWidth = holderMain.domElem.width();
console.log('Ширина блока под фотографию главную', this.sliderMainWidth);
//Высота блока под главную фотографию
this.holderMainHeight = this.holderMainWidth / 1.54;
console.log('Высота блока под фотографию главную', this.sliderMainHeight);
holderMain.domElem.css({ height: this.holderMainHeight});
//Ширина каждого слайда
this.slideWidth = slide.domElem.width();
console.log('Ширина слайда', this.slideWidth);
//Видимая ширина слайдбара
slidesWidth = this.slideWidth * step;
console.log('Видимая ширина слайдбара', innerWidth);
innerBl.domElem.css({ width: slidesWidth});
//Определяем ширину всех элементов
var _this = this;
this._elems('item').forEach(function(elem) {
counter++;
});
console.log('Число элементов', counter);
slidesWidthFull = this.slideWidth * counter;
console.log('Общая ширина слайдбара', slidesWidthFull);
slides.domElem.css({transform: 'translate3d(0px, 0px, 0px)', transition: '0s', width: slidesWidthFull});
//Сдвигаем слайды влево
this._domEvents('control-prev').on('click', function(e) {
console.log('клик по gравому контролу');
position = Math.min(position + this.slideWidth * step, 0);
test = 'translate3d('+position+'px, 0px, 0px)';
console.log('Определяем на сколько сдвинуть', position);
slides.domElem.css({transform: test, transition: '250ms', width: slidesWidthFull});
});
//Сдвигаем слайды вправо
this._domEvents('control-next').on('click', function(e) {
console.log('клик по левому контролу');
val1 = position - this.slideWidth * step;
val2 = -this.slideWidth * (counter - step)
position = Math.max(val1, val2);
test = 'translate3d('+position+'px, 0px, 0px)';
console.log(test);
slides.domElem.css({transform: test, transition: '250ms', width: slidesWidthFull});
});
//Кликаем по слайду
this._domEvents('item').on('click',this._onCurSlide);
//Определяем первый активный элемент
this._events('item').on({ modName : 'active', modVal : true },this._onCurSlides);
this._elem('item').setMod('active');
}
},
},
_onCurSlide: function(e) {
var curSlide = e.bemTarget.params.slide;
curSrc = e.bemTarget.params.src;
oneId = e.bemTarget.params.id;
console.log(curSlide);
console.log(curSrc);
var sliderMain = {
block: 'show-gallery-image',
js:{src:curSrc},
content: [
{
elem:'image',
tag:'img',
attrs:{src:curSrc}
},
// {
// elem:'zoom',
// },
]
};
html = BEMHTML.apply(sliderMain);
console.log('формируем html', html);
bemDom.update(holderMain.domElem, html);
},
_onCurSlides: function(e) {
var oneSlide = e.bemTarget.params.slide;
oneSrc = e.bemTarget.params.src;
oneId = e.bemTarget.params.id;
console.log('Номер первого слайдера', oneSlide ,oneSrc );
var sliderMainDefault = {
block: 'show-gallery-image',
js:{src:oneSrc},
content: [
{
elem:'image',
tag:'img',
attrs:{src:oneSrc}
},
// {
// elem:'zoom',
// },
]
};
html = BEMHTML.apply(sliderMainDefault);
console.log('формируем шаблон html по умолчанию', html);
bemDom.update(holderMain.domElem, html);
},
}));
});
