Detaillierte Erklärung zur Verwendung der Click-to-Switch-Bildkomponente im Vue-Kartenstil

<Vorlage>
 <!-- 
 *Datengesteuerte Anzeige von Bildern im Kartenstil (keine Animation)
 * -->
 <div Klasse="KartenBanner">
   <ul>
    <li v-for="(Artikel, Index) in Kartendaten" :Schlüssel="Index">
     <a href="#">
      <img :src="item.src" alt="">
      <p>Beschreibung dieses Bildes {{item.order}}</p>
     </a>
    </li>
    <div Klasse = "Pfeil-links" @click = "toggleFun (-1)">&lt;</div>
    <div Klasse="Pfeil-rechts" @click="toggleFun(1)">&gt;</div>
   </ul>
 </div>
</Vorlage>

<Skript>
 Standard exportieren {
  Daten(){
   zurückkehren {
    Kartendaten: [
     {id:1,src:require('../assets/images/banner.jpg'),},
     {id:2,src:require('../assets/images/text.jpg')},
     {id:3,src:require('../assets/images/[email protected]')},
     {id:4,src:require('../assets/images/text.jpg')},
     {id:5,src:require('../assets/images/banner.jpg')}
    ]
   }
  },
  Methoden: {
   //Daten durch Funktion ändern um Ansichtsänderung zu erreichen toggleFun(p){
    diese.cardData = diese.cardData.map((item,index,array) => {
     wenn(index===array.length-1&&p===1){
      Element = Array[0]
     }
     sonst wenn(index===0&&p===-1){
      Element = Array[Array.Länge-1];
     }anders{
      Element = Array[Index+p];
     }
     Artikel zurückgeben;
    })
   }
  }
 }
</Skript>

<Stilbereich>
.cardBanner{
 Polsterung: 10px 30px;
 Hintergrundfarbe: #fff;
 Rand: 1px durchgezogen #ccc;
 Position: relativ;
}
.cardBanner ul{
 Anzeige: Flex;
 Überlauf: Scrollen; /*Bildlaufleiste festlegen*/
}
.cardBanner ul::-webkit-scrollbar{ /*Bildlaufleiste ausblenden*/
 Anzeige: keine;
}
.cardBanner ul>li{ // Energiereicher Teil, Flex ist nicht leicht zu erklären width: 31.33333%;
 Flex-Schrumpfen: 0;
 Polsterung links: 3 %;
 Textausrichtung: zentriert;
}
.cardBanner ul>li:first-child{
 Polsterung links: 0;
}
.cardBanner ul>li a{
 Anzeige: Block;
 Breite: 100 %;
 Höhe: 100%;
}
.cardBanner ul>li img{
 Breite: 100 %;
 Höhe: 170px;
 Rahmenradius: 5px;
}
.cardBanner ul>li p{
 Rand: 0;
}
[Klasse^='Pfeil']{
 Schriftgröße: 30px;
 transformieren: scaleX(.7);
 Farbe: #ddd;
}
.Pfeil-links{
 Position: absolut;
 links: 5px;
 oben: 50 %;
 Rand oben: -17px;
}
.Pfeil nach rechts
 Position: absolut;
 rechts: 5px;
 oben: 50 %;
 Rand oben: -17px;
}
</Stil>