Точки разбиения Swiper.IO теперь отображаются - PullRequest
Новая
       14

Точки разбиения Swiper.IO теперь отображаются

0 голосов
/ 14 января 2020

по какой-то причине, swiper не показывает разбиение на страницы для изображения, которое я написал. Он появляется в дом, но с высотой 0. Изменение вручную ничего не сделало. Есть идеи? 

import Swiper from '../../vendor/swiper.min.js';

export default {
  name: 'ImageCarouselBlock',
  components: {
    MediaImage,
  },
  props: {
    cmsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  mounted() {
    let carouselConfig = {};
    if (this.cmsData.auto){
      carouselConfig = {
        spaceBetween: 30,
        centeredSlide: true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false,
        },
      };
    }
    else {
      carouselConfig = {
        spaceBetween: 30,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
        },
      };
    }
    const mySwiper = new Swiper('.swiper-container', carouselConfig);
  },
  computed: {
    images() {
      return this.cmsData.images.map( image => {
        return {
          //  TODO maybe get something from amplicence that tells how big they want the carousel to be?
          imageData : getMediaAndSources(image.name, '1500'),
        };
      });
    },
  },
};

А это соответствующий шаблон. Я попытался изменить положение, где я положил элемент нумерации страниц, но ничего не получалось. У меня нет идей, и мне нужна помощь. 

<div class="image-carousel-block">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="image in images">
        <media-image preload="true" :sources="image.imageData.sources" :media="image.imageData.media" />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</div>

1 Ответ

0 голосов
/ 14 января 2020

Виновник был в моем vue файле. 

<template src="./template.html"></template>
<script src="./script.js"></script>
<style lang="stylus" scoped> -- wrong here
  @import '../../vendor/swiper.styl'
  @import './style.styl'
</style>

Удаление "scoped" помогло мне.

...