Почему не убираются стили и стрелки Swiper при destroy?

Question

[HelpSophie]

Почему не убираются стили и стрелки Swiper при destroy?
Нужно, чтобы слайдер работал только при вьюпорте >1000, а при меньшем была кучка картинок.
Вроде бы написано mySwiper.destroy( true, true ) - должны убраться. А они остаются.

https://jsfiddle.net/Lq15jmuz/

Answer 1

[0xD34F]

Про стили не понял, а стрелки... Встречный вопрос - почему они должны убираться? Вы эти элементы создали - сами и решайте, что с ними делать. Например, можно их показывать/прятать при создании/уничтожении слайдера. После инициализации/дестроя у контейнера переключается класс swiper-container-initialized, можно назначать нужные стили в зависимости от его наличия:

.swiper-container:not(.swiper-container-initialized) {
  .swiper-button-prev,
  .swiper-button-next,
  .swiper-pagination {
    display: none;
  }
}

Comments

[HelpSophie]

Для пагинации нашла в API mySwiper.pagination.destroy();
Для стрелок, вероятно, аналогично.

Встречный вопрос - почему они должны убираться?

Потому что так написано в документации https://swiperjs.com/api/ По крайней мере, я её так понимаю.

mySwiper.destroy(deleteInstance, cleanStyles); Destroy slider instance and detach all events listeners, where
deleteInstance - boolean - Set it to false (by default it is true) to not to delete Swiper instance
cleanStyles - boolean - Set it to true (by default it is true) and all custom styles will be removed from slides, wrapper and container. Useful if you need to destroy Swiper and to init again with new options or in different direction

И еще нашла пример, в котором работает https://codepen.io/aaronkahlhamer/pen/GveaXP?edito...
только там media в другую сторону.
А у меня нет :(

[0xD34F]

HelpSophie,

Потому что так написано в документации

Да ну? Не вижу тут ни слова про удаление элементов. Про удаление обработчиков событий - есть. Про вырезание стилей - есть. Про удаление элементов - нет.

нашла пример, в котором работает

Честно говоря, я не понял, чего там работает и что вы хотели этим примером проиллюстрировать.

[HelpSophie]

0xD34F,

Про вырезание стилей - есть.

Я про стили и говорю. Но они же не вырезаются. У меня.
А в примере вырезаются.

[0xD34F]

HelpSophie, про стили я вам сразу сказал, что не понимаю, о чём вы говорите. Вы перечитайте ответ.

[0xD34F]

HelpSophie, раз не можете объяснить, чего там у вас не удаляется, давайте зайдём с другой стороны: похоже на то, чего вы пытаетесь сделать?

[HelpSophie]

0xD34F, на самом деле все работало. Давно и даже, вероятно, сразу :)
Не работал хром. У него бывает когда много вкладок и адаптивный режим туда сюда таскают.

Вам спасибо.

Answer 2

[Андрей]

Вопрос древний, но там фишка в контексте выполнения функций и области видимости переменных.
На примере, переменная в которую записывается объект свайпера, лежит в самом верху.

Решал похожую задачу, и случайно написал переменную внутрь функции инициализации.
По итогу, я тупо не мог дотянуться до нужного экземпляра свайпера, чтоб применить ему метод дестрой.

{
    const parent = document.querySelector(".parent");
    if (!parent) return;

    const sliderEl = parent.querySelector(".slider");
    let slider;

    const checkWindowSize = () => {
        if (window.innerWidth >= 1024 && window.innerHeight >= 720) return true;
        return false;
    };

    function init() {
        if (slider) slider.destroy(true, true);

        if (checkWindowSize()) {
            slider = new Swiper(sliderEl, {
                mousewheel: true,
            });
        }
    }

    window.addEventListener("resize", () => {
        init();
    });

    init();
}