Javascript-форум - tiny-slider инициализация и destroy в зависимости от размеров window

Всем привет. Подскажите, пожалуйста, как решить следующую задачу.
Использую на сайте слудующий слайдер:
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
        });
    }
}