Как сделать tiny-slider инициализацию и destroy в зависимости от размеров window?

Question

[s24344]

Всем привет. Подскажите, пожалуйста, как решить следующую задачу.
Использую на сайте слудующий слайдер:
https://github.com/ganlanyuan/tiny-slider
Задача у меня следующая. При разрешении ъкрана до 1280px отображать слайдер с одними настройками, а при большем разрешении с другими. Я написал фунцию на resize, которая отрабатывает один раз при соответствующий условиях. Теперь необходимо в этих условиях разрушать одни настройки и инициализировать другие, но никак не могу понять как это сделать. Буду благодарен любой помощи.
Responsive не работает, если изменять mode и fixedWidth.

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
        });
    }
}

Answer 1

[multiscripter]

В API есть методы и свойства. Пробовал их?
То есть в updatedSlider() попробуй что-то типа this.slider.rebuild();

Comments

[s24344]

Пробовал, но всё равно работает не правильно.

[multiscripter]

s24344, а комбинация desctroy(), затем initSlider() ?

[s24344]

Только что закончил. Вроде бы работает:

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.size = 1280;
        this.tinySlider = null;

        this.desktop = {
            'mode': 'gallery',
            'item': 1,
            'controls': false,
            'nav': false,
            "gutter": 20,
            "fixedWidth": false,
            "swipeAngle": false,
            "mouseDrag": true,
            'nav': true,
            'container': this.slider
        };

        this.mobile = {
            'controls': false,
            "gutter": 20,
            "fixedWidth": 250,
            "swipeAngle": false,
            "mouseDrag": true,
            'nav': true,
            'container': this.slider
        };

        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);
    }

    initSlider(event) {
        let windowWidth = window.innerWidth;

        if (windowWidth <= this.size) {
            this.tinySlider = tns(this.mobile);
        }

        if (windowWidth >= this.size) {
            this.tinySlider = tns(this.desktop);
        }
    }

    updatedSlider(event) {
        let windowWidth = window.innerWidth;

        if (!this.flag && windowWidth <= this.size) {
            console.log('window меньше 1280px');

            this.tinySlider.destroy();
            this.tinySlider = tns(this.mobile);

            this.flag = true;
        }

        if (this.flag && windowWidth >= this.size) {
            console.log('window больше 1280px');

            this.tinySlider.destroy();
            this.tinySlider = tns(this.desktop);

            this.flag = false;
        }
    }
}

[multiscripter]

s24344, меня вот смущают строки:
if (!this.flag && windowWidth <= this.size) {
и
if (this.flag && windowWidth >= this.size) {

Почему не
else if (this.flag && windowWidth >= this.size) {
?

И почему в обоих есть знак =
?

[s24344]

multiscripter, Делал в спешке. Согласен с Вами.