Почему swiper loop дублирует слайды без контента?

Question

[Никита Кит]

Есть у меня такой вот vue component. Он принимает в себя data из json с массивом объектов с данными каждого слайда.
Слайдер включает в себя функционал бесконечной прокрутки. Я применил плагин обёртку vue-awesome-swiper. Всё рендерится грамотно до тех пор, пока я не включаю параметр loop: true.

Слайды бесконечной прокрутки (swiper-slide-duplicate) копируются без контента внутри. При чём и frontStage и backStage. Инициализация по watch content.slides мне не помогла.

Код компонента.
Что я делаю не так? loop крайне необходим.

<script lang='coffee'>
  Vue = require "vue/dist/vue.js"
  Swiper = require "swiper"
  mainslider = Vue.component "mainslider",
    props: ['content']

    data: ->
      return {
        frontSliderOption: {
          observer: true
          parallax: true,
          init: false
          slideToClickedSlide: true
          slidesPerView: 'auto'
          loopedSlides: 0
          loop: true
          centeredSlides: false
          hashNavigation:
            replaceState: true
          pagination:
            el: ".swiper-pagination",
            type: 'fraction',
            speed: 500
        },
        backSliderOption: {
          observer: true
          slidesPerView: 1
          effect: 'fade',
          speed: 500,
          init: false,
          loop: true
          loopedSlides: 0
        }
      }
    computed:
      backStage: ->
        return this.$refs.backStage.swiper

      frontStage: ->
        return this.$refs.frontStage.swiper


    watch:
      "content.slides": (newVal, oldVal) ->
        this.frontSliderOption.loopedSlides = newVal.length
        this.backSliderOption.loopedSlides = newVal.length
        this.backStage.init()
        this.frontStage.init()

    created: ->
      if window.innerWidth >= 960
        this.frontSliderOption.centeredSlides = true

    mounted: ->
      front = this.frontStage
      back = this.backStage
      front.on "slideChange", ->
        back.slideTo front.activeIndex
        scrollToTop = ->
          window.scrollTo(0, window.pageYOffset - 20)
          if window.pageYOffset > 1
            requestAnimationFrame(scrollToTop)
        requestAnimationFrame(scrollToTop)




  module.exports = mainslider
</script>
<template>
  <div class="slider mainframe__slider j-main-slider">
    <div class="slider__back">
      <swiper :options='backSliderOption' ref='backStage' class="swiper-container j-main-slider__back slider__container">
        <swiper-slide v-for='slide in content.slides' class="swiper-slide slider__slide">
          <div class="slider__slide-pic" :style="{'background-image':'url('+slide.background+')'}"></div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="slider__front">
      <swiper :options="frontSliderOption" ref='frontStage'>
        <swiper-slide v-for='(slide, index) in content.slides' class="swiper-slide slider__slide-front" :data-hash="slide.hash">
          <div class="featured">
            <div class="featured__plate column-xs">
              <div class="featured__pre-head j-main-slider__pre-head slider__pre-head">
                <div>{{slide.preHead}}</div>
              </div>
              <div class="featured__fraction-sm-more" data-swiper-parallax="-100%" data-swiper-parallax-opacity="0"><span class="index">{{index + 1}}</span><span class="delimeter"> слайд из </span><span class="total">{{content.slides.length}}</span></div>
              <div class="featured__title" data-swiper-parallax="-150%" data-swiper-parallax-opacity="0">{{slide.title}}</div>
              <div class="featured__description" data-swiper-parallax="-150%" data-swiper-parallax-opacity="0">{{slide.desc}}</div>
              <div class="featured__crumbs-sm-more crumbs" data-swiper-parallax="-150%" data-swiper-parallax-opacity="0">
                <div class="crumbs__title">На этой странице:</div>
                <div class="crumbs__row">
                  <div class="crumbs__item" v-for='item in slide.crumbs'>{{item}}</div>
                </div>
              </div><a class="featured__more-xs" href="javascript:void(0)">
              <div v-if='slide.announce === false' v-html='content.moreIcon'></div>
              <span>{{slide.moretext}}</span></a>
            </div>
          </div>
        </swiper-slide>
        <div class="swiper-pagination slider__fraction-xs j-main-slider__fraction" slot='pagination'></div>
      </swiper>
      <div class="j-main-slider__slide-line slider__slide-line-xs"></div>
    </div>
  </div>

</template>

Answer 1

[egerr]

там вроде суть в том, что он делает дубль только элемента в DOM, поэтому и логика не работает. я сейчас столкнулся с тем же самым, только у меня проще - скролл по кнопке не работает. пока ищу решение

Answer 2

[Mayya_Pakhomova]

Мне помогло
setTimeout(()=>{
this.swiper.loopDestroy()
this.swiper.loopCreate()
})
Но не для effect: 'fade'

Answer 3

[Sabmailcom]

Была похожая проблема, только в Swiper были видеоролики, которые нужно было останавливать при пролистывании. Решением стало сохранение инстансов видео в хранилище (store). При пролистывании Swiper из хранилища вызывалось событие pause для каждого инстанса. Версию Swiper понизил до v8.4.6. все что выше не срабатывало.