Vue-Komponente zur Realisierung einer Karussell-Animation

<Vorlage>
  <div id="Wrapper">
    <Übergangsgruppenname="Liste" Tag="ul" Modus="raus-ein">
      <li v-for="(Element, Index) in Bilderliste" :key="Element.URL" :style="Konfiguration[Index]">
        <img :src="Artikel.URL">
      </li>
    </Übergangsgruppe>
    <a href="javascript:;" id="arrLeft" class="prev" @click="turnleft"></a>
    <a href="javascript:;" id="arrRight" class="next" @click="rechtsdurchdrehen"></a>
  </div>
</Vorlage>

Standard exportieren {
  Daten() {
    zurückkehren {
      Bilderliste: [
        { url: erfordern("../image/pic1.png") },
        { url: erfordern("../image/pic2.png") },
        { url: erfordern("../image/pic3.png") }
      ],
      //Dateibildkonfiguration config: [
        {
          Position: "absolut",
          Breite: "400px",
          oben: "20px",
          links: "50px",
          Deckkraft: 0,2,
          zIndex: 2,
          Übergang: „1s“
        },
        {
          Position: "absolut",
          Breite: "800px",
          oben: "100px",
          links: "200px",
          Deckkraft: 1,
          zIndex: 4,
          Übergang: „1s“
        },
        {
          Position: "absolut",
          Breite: "400px",
          oben: "20px",
          links: "750px",
          Deckkraft: 0,2,
          zIndex: 2,
          Übergang: „1s“
        }
      ],
      vorher: 0,
      jetzt: Date.now()
    };
  },
  Methoden: {
  // Realisiere die Animation des Klickens auf die Schaltfläche zum Umschalten. Stelle den Zeitparameter ein, um mehrfaches Klicken zu verhindern. turnleft: function() {
      dies.jetzt = Datum.jetzt();
      wenn (dies.jetzt - dies.vorheriges > 1000) {
        dies.config.push(diese.config.shift());
        dies.vorheriges = dies.jetzt;
      }
    },
    rechts abbiegen: Funktion() {
      dies.jetzt = Datum.jetzt();
      wenn (dies.jetzt - dies.vorheriges > 1000) {
        dies.config.unshift(diese.config.pop());
        dies.vorheriges = dies.jetzt;
      }
    }
  }
};

* {
  Rand: 0;
  Polsterung: 0;
}
#Wrapper {
  Rand: automatisch;
  Höhe: 500px;
  Breite: 79 %;
  Position: relativ;
}
ul {
  Listenstil: keiner;
}
li img {
  Höhe: 500px;
  Breite: 100 %;
}
.vorherige,
.nächste {
  Position: absolut;
  Höhe: 60px;
  Breite: 60px;
  Randradius: 50 %;
  oben: 50 %;
  Rand oben: -56px;
  Überlauf: versteckt;
  Textdekoration: keine;
  Hintergrundfarbe: Aqua;
  Z-Index: 5;
  Deckkraft: 1;
}
.vorherige {
  links: 0;
}
.nächste {
  rechts: 0;
}
.Bild links {
  Breite: 400;
  oben: 20;
  links: 50;
  Deckkraft: 0,2;
  Z-Index: 2;
}
.piccenter {
  Breite: 800;
  oben: 100;
  links: 200;
  Deckkraft: 1;
  Z-Index: 4;
}
.Bild rechts {
  Breite: 400;
  oben: 20;
  links: 750;
  Deckkraft: 0,2;
  Z-Index: 2;
}