Всем привет. Подскажите, пожалуйста, как решить следующую задачу.
Использую на сайте слудующий слайдер:
https://github.com/ganlanyuan/tiny-slider
Задача у меня следующая. При разрешении ъкрана до 1280px отображать слайдер с одними настройками, а при большем разрешении с другими. Я написал фунцию на resize, которая отрабатывает один раз при соответствующий условиях. Теперь необходимо в этих условиях разрушать одни настройки и инициализировать другие, но никак не могу понять как это сделать. Буду благодарен любой помощи.
import BaseComponent from '../../../general/js/base-component';
import { tns } from "../../../../node_modules/tiny-slider/src/tiny-slider"
export default class HeroComponent extends BaseComponent {
constructor() {
super(...arguments);
this.slider = this.refs.slider;
this.flag = false;
this.initSlider = this.initSlider.bind(this);
this.updatedSlider = this.updatedSlider.bind(this);
this.init();
}
init() {
this.addListener(document, 'DOMContentLoaded', this.initSlider);
this.addListener(window, 'resize', this.updatedSlider);
}
updatedSlider(event) {
let size = 1280;
let w = window.innerWidth;
if (!this.flag && w <= size) {
console.log('window меньше 1280px');
this.flag = true;
}
if (this.flag && w >= size) {
console.log('window больше 1280px');
this.flag = false;
}
}
initSlider(event) {
const slider = tns({
'mode': 'gallery',
'item': 1,
'controls': false,
'nav': false,
"gutter": 20,
"fixedWidth": false,
"swipeAngle": false,
"mouseDrag": true,
'nav': true,
'container': this.slider
});
}
}
