NazariyM
11/4/2018 - 5:05 PM

view block

class View {
  constructor(el) {
    this.$container = $(el);
    this.$nav = $(this.$container.children()[0]);
    this.$block = $(this.$container.children()[1]);

    if (this.$container.length) this.init();
  }

  init() {
    this.createSliders();
  }

  createSliders() {
    this.$nav.slick({
      asNavFor: this.$block,
      speed: 400,
      slidesToShow: 4,
      rows: 0,
      arrows: false,
      focusOnSelect: true
    });

    this.$block.slick({
      asNavFor: this.$nav,
      rows: 0,
      arrows: false
    });
  }
}

$('.js-view').each((i, el) => new View(el));
+b.view.js-view
					+e.nav
						-i = 0
						while i < 3
							+e.nav-item
								+e.IMG(src=`img/content/products/product_sld-sm-1.jpg` alt='image')
							+e.nav-item
								+e.IMG(src=`img/content/products/product_sld-sm-2.jpg` alt='image')
							-i++

					+e.block
						-i = 0
						while i < 6
							+e.block-item
								+e.IMG(src=`img/content/products/product_sld-lg.jpg` alt='image')
							-i++