duplicated slides rendered without content

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

		data: ->
			return {
				frontSliderOption: {
					parallax: true,
					init: false
					slideToClickedSlide: true
					slidesPerView: 'auto'
					loop: true
					loopedSlides: 0
					hashNavigation:
						replaceState: true
					pagination:
						el: ".swiper-pagination",
						type: 'fraction',
						speed: 500
				},
				backSliderOption: {
					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()


		mounted: ->

			that = this
			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 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__decorates-sm-more slider__decorates j-main-slider__decorates">
								<div class="featured__rotate-icon slider__rotator j-main-slider__rotator"></div>
							</div>
							<div class="featured__pre-head j-main-slider__pre-head slider__pre-head">
								<div>{{slide.preHead}}</div>
							</div>
							<div class="featured__shadow-title-sm-more slider__shadow-title j-main-slider__shadow-title">У нас заварилась чайная история</div>
							<div class="featured__fraction-sm-more" data-swiper-parallax="-100%" data-swiper-parallax-opacity="0"><span class="index"></span><span class="delimeter">слайд из </span><span class="total"></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><a class="featured__more-md-more" href="javascript:void(0)" data-swiper-parallax="-150%" data-swiper-parallax-opacity="0">Подробнее</a>
							<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" v-for='item in slide.crumbs'>
									<div class="crumbs__item">{{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 class="mainframe__icon-line">
			<div class="mainframe__icon-wrapper">
				<div class="mainframe__icon" data-icon="skyfall-group"></div>
			</div>
		</div>
	</div>

</template>