EN
webtehnology
webtehnology
4 июля 2017

Добрый день!
Вопрос про инициализацию слайдера. Написал простенький слайдер, который работает, но таких слайдеров нужно 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);
    },




}));

});
webtehnology
#webtehnology
4 июля 2017

Работают 2 слайдера как нужно, если вместо
bemDom.update(holderMain.domElem, html);
прописать
bemDom.update(this._elem('holder').domElem, html);