ZeenTeaserSection

Компонент ZeenTeaserSection

Примеры:

Test

Слот тизера "description"

Test

Слот тизера "description"

Test

Слот тизера "description"

Source Code - исходный код компонента

<template lang="pug">
  .zeen-teaser-section.swiper
    ZeenContainer.swiper__container
      .swiper-container(ref='slider')
        .swiper-wrapper
            .swiper-slide(v-for='(teaser, index) in teasers' :key='index')
              ZeenTeaser(
                v-bind='teaser'
                v-on='$listeners'
                theme='card'
              )
                template(v-for='(_, slot) of $scopedSlots' v-slot:[slot]='scope')
                  slot(:name='slot' v-bind='scope')
</template>

<script>
import Vue from 'vue'
import Swiper from 'swiper/bundle'

export default {
  name: 'ZeenTeaserSection',
  props: {
    settingsSwiper: {
      type: Object,
      require: false,
      default: () => ({
        breakpoints: {
          1400: {
            slidesPerView: 4.5,
            spaceBetween: 24,
          },
          1200: {
            slidesPerView: 3.5,
            spaceBetween: 24,
          },
          992: {
            slidesPerView: 3.5,
            spaceBetween: 24,
          },
          768: {
            slidesPerView: 2.5,
            spaceBetween: 24,
          },
          560: {
            slidesPerView: 1.8,
            spaceBetween: 24,
          },
          320: {
            slidesPerView: 1.1,
            spaceBetween: 24,
          },
          0: {
            slidesPerView: 1.1,
            spaceBetween: 24,
          },
        },
      }),
    },
    attrTeaser: {
      type: Object,
      default: () => ({}),
    },
    teasers: {
      type: Array,
      required: true,
    },
  },
  mounted() {
    this.slider = new Swiper(this.$refs.slider, this.settingsSwiper)
    this.updateSlider()
    setTimeout(() => {
      this.updateSlider()
    }, 1000)
  },
  methods: {
    updateSlider() {
      Vue.nextTick(() => {
        setTimeout(() => {
          this.slider.update()
        }, 1000)
      })
    },
  },
}
</script>

<style scoped lang="scss">
.swiper-container {
  overflow: visible;
}
</style>