Я использую https://swiperjs.com/ и работаю с Vue Framework. Я объясню различные сценарии:
Сценарий 1 (выдает ошибку, нужно исправить это): я получаю отзывы по запросу GraphQL. Ответ используется для заполнения Swiper. Этот способ динамического добавления контента в swiper дает мне ошибку, когда ползунок начинается с последнего слайда.
Сценарий 2 (работает, но контент устанавливается вручную): я определил содержание отзывовв качестве переменной в моем разделе данных. Слайдер работает как надо. Установка данных вручную во всех жизненных циклах, кроме beforeCreate, работает без ошибок.
Это мой соответствующий код:
getProductReviews(this.$apollo, { sku: 0 })
.then(result => {
// const temp = result.data.getBVReviews.reviews;
// result.data.getBVReviews.reviews.push(temp[0]);
// result.data.getBVReviews.reviews.push(temp[1]);
this.getBVReviews = result.data.getBVReviews;
if (this.isMounted) {
this.setupReviewSlider();
}
})
.catch(error => {
console.log('Failed to load review data.');
console.log(error);
});
setupReviewSlider() {
this.reviewSlider = new Swiper('.swiper-container', {
slidesPerView: 'auto',
initialSlide: 0,
observer: true,
observParents: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
// this.reviewSlider.on('reachEnd', () => {
// this.reviewSlider.slideTo(0, false,false);
// this.reviewSlider.autoplay = false;
// })
},
HTML-часть довольно большая, и это только смущает вас. Я сомневаюсь, что есть необходимость увидеть это, но если вы просто скажите мне.
Есть идеи?