Vue+Swiper realisiert Timeline-Effekt

<Vorlage>
  <div Klasse="hallo" Stil="Höhe:100%;Breite:100%;Position:relativ;">
    <div Klasse="swiperlist">
      <div Klasse="Swipers">
        <div Klasse="Swiper-Container">
          <div Klasse="swiper-wrapper">
            <div class="swiper-slide" v-for="(Aktivität, Index) in Super-URL" :key="Index">
              <div Stil="padding-left: 4px;">
                <div Klasse = "Schrittlinie"></div>
                <div Klasse="Schritt-Inhalt">
                  <div Klasse="Schritt-Nummer"></div>
                  <div class="sub_title">{{aktivität.img}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div Klasse="buttom" v-if="superurl.length>2">
          <div Klasse="swiper-button-prev"></div>
          <div Klasse="swiper-button-next"></div>
        </div>
      </div>
    </div>
  </div>
</Vorlage>
<Skript>
Swiper von „swiper“ importieren;
importiere "../../../../../node_modules/swiper/css/swiper.min.css";
importiere baseMap aus "./baseMap.vue";
importiere "../../../../../static/mapbox/css/map.css";
Standard exportieren {
  Name: "Karte",
  Komponenten:
    Basiskarte
  },
  Daten() {
    zurückkehren {
      Super-URL: [
        {
          URL: "",
          Bild: „2019-01“
        },
        {
          URL: "",
          Bild: „2019-02“
        },
        {
          URL: "",
          Bild: „2019-03“
        },
        {
          URL: "",
          Bild: „2019-04“
        },
        {
          URL: "",
          Bild: „2019-05“
        },
        {
          URL: "",
          Bild: „2019-06“
        }
      ]
    };
  },
  betrachten: {},
  Methoden: {},
  montiert() {
    var meinSwiper = neuer Swiper(".swiper-container", {
      slidesPerView: 3, //Drei Folien anzeigen centeredSlides: true, //Wenn auf true gesetzt, wird die aktive Folie zentriert statt wie standardmäßig links angezeigt.
      centerInsufficientSlides: true, //Aktivieren Sie diesen Parameter. Wenn die Gesamtzahl der Folien kleiner als slidesPerView ist, werden die Folien zentriert. Gilt nicht für den Loop-Modus und slidesPerColumn
      centeredSlidesBounds: true, //Sorgen Sie dafür, dass die erste und die letzte Folie immer an den Rand passen.
      // Schleife: true, // Schleife // Autoplay: true, // Autoplay-Richtung: "vertikal", // vertikale Bildschirmnavigation: {
        nächstesEl: ".swiper-button-next",
        vorheriges: ".swiper-button-prev"
      }
    });
  }
};
</Skript>
<Stilbereich>
.swiperlist {
  Breite: 90px;
  Höhe: 256px;
  Position: absolut;
  Hintergrund: #f5f5f5;
  links: 5px;
  oben: 205px;
  Überlauf: versteckt;
  Polsterung: 32px 0;
  Rahmenradius: 6px;
}
.swipers {
  Breite: 100 %;
  Höhe: 250px;
  Überlauf: versteckt;
}
.swiper-container {
  Höhe: 250px !wichtig;
}
.swiper-slide-active {
  Farbe: #3a70ca;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  links: 28px;
  rechts: auto;
  oben: 15px;
  transformieren: drehen (90 Grad);
  Farbe: #3a70ca;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  oben: 94 %;
  transformieren: drehen (90 Grad);
  links: 28px;
  Farbe: #3a70ca;
}
.swiper-button-next:nach,
.swiper-button-prev:nach {
  Schriftgröße: 25px;
}
.Untertitel {
  Rand links: 15px;
  Rand oben: -19px;
}
.Schrittnummer {
  Anzeige: Inline-Block;
  Höhe: 2px;
  Breite: 2px;
  Farbe: #fff;
  Hintergrundfarbe: #3a70ca;
  Zeilenhöhe: 30px;
  Randradius: 50 %;
  Textausrichtung: zentriert;
  Rand: 2px durchgezogen #3a70ca;
  Rand oben: 36px;
}
.Schrittnummer:nach {
  Inhalt: "";
  Breite: 2px;
  Höhe: 84px;
  Rahmen links: 1,5px gepunktet #3a70ca;
  /* Hintergrundfarbe: #3a70ca; */
  Position: absolut;
  oben: 0px;
  Rand links: -1px;
}
</Stil>