@kirill-93

Как изменить набор слайдов в vue-slick?

Использую карусель vue-slick, которая инициализируется на старте. Есть кнопка "добавить слайд", после которой нужно "перезапустить" слайдер. Но как это сделать нигде не сказано. Пробую использовать в методе добавления слайда this.$refs.slick.$reSlick(), ничего не получается. Как правильно обновлять слайдер?
  • Вопрос задан
  • 549 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Использую карусель vue-slick...

Я так понимаю, вы говорите про эту?

Есть кнопка "добавить слайд", после которой нужно "перезапустить" слайдер. <...> Пробую использовать в методе добавления слайда this.$refs.slick.$reSlick(), ничего не получается.

Что неудивительно - внутри reSlick карусель уничтожается и сразу же создаётся. При уничтожении вся внутренняя разметка кроме картинок вырезается, сами же картинки slick держит в отдельном div'е - то есть, только что добавленный слайд попадает в корневой элемент slick'a и сразу же удаляется.

Так что порядок действий при изменении набора слайдов должен выглядеть как-то так - уничтожить карусель, изменить разметку, создать карусель. То есть, вызов $refs.slick.destroy; затем изменение данных, на основе которых строится разметка слайдов; и наконец, вызов $refs.slick.create, обёрнутый в $nextTick.

Заниматься подобной ерундой особого смысла не вижу, лучше будем уничтожать и создавать заново экземпляр самого компонента. Для этого назначим ему key, чьё значение будет зависеть от набора данных, на основе которых строится разметка слайдов. Например.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы