Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.08.2018, 12:49
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

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
        });
    }
}
Ответить с цитированием
  #2 (permalink)  
Старый 01.08.2018, 12:51
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,577

https://github.com/ganlanyuan/tiny-s...onsive-options
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 01.08.2018, 12:53
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

Responsive не работает, если изменять mode и fixedWidth.
Ответить с цитированием
  #4 (permalink)  
Старый 01.08.2018, 15:33
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,577

fixedWidth - меняет(судя по докам).
А раз вам надо сменить mode, то очевидно - сначала .destroy() потом заново создать с нуля.

Вообще что за сложности у вас с чтением доков?
__________________
29375, 35
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
уменьшения шрифта в зависимости размеров div runyugin Элементы интерфейса 2 26.01.2015 08:48
Инициализация плагина при изменении размеров окна браузера prison47 jQuery 12 02.04.2013 03:45
Jquery: pretty simple content slider + popup window gelo jQuery 3 19.06.2011 10:05
Изменение размеров в зависимости от картинки lanzs Элементы интерфейса 9 10.12.2008 21:39