Vue imitiert den Karusselleffekt von Ctrip (gleitendes Karussell, unten hochadaptiv)

npm installiere swiper --save-dev

Swiper von „swiper“ importieren
importiere { TweenMax, Power2 } von 'gsap' 

// Bildschirmbreite und -höhe neu berechnen resize(swiper) {
	this.clientWidth = Dokument.documentElement.clientWidth||Dokument.body.clientWidth;
	this.clientHeight = document.documentElement.clientHeight||document.body.clientHeight;
	dies.zeichnen(swiper)
},

npm installiere gsap -D

// Höhe des Swiper-Containers dynamisch berechnen draw(swiper) {
				TweenMax.to(this.tweenObj, 0.5, {übersetzen: swiper.translate, ease: Power2.easeOut,
					beiUpdate: () => {
						lass übersetzen = this.tweenObj.translate
						// Linker Folienindex let iLeft = Math.floor(-translate / this.clientWidth)
						wenn (iLeft > diese.Folienlänge) {
							iLeft = diese.slidesLength
						}
						// Rechter Folienindex let iRight = iLeft + 1
						wenn (iRight > diese.Folienlänge) {
							iRight = diese.Folienlänge
						}
						für (lass i = 0; i < this.swiperSlide.length; i++) {
							//Wenn die Bildbreite den gesamten Bildschirm abdeckt, beträgt die Höhe jedes Bildes this.swiperSlide[i].fullHeight = this.clientWidth/this.swiperSlide[i].getBoundingClientRect().width * this.swiperSlide[i].getBoundingClientRect().height;
						}
						//Bewegungsverhältnis Die Höhe ändert sich während der Bewegung von 0 über 1 zu 0 let percent = Number((-translate / this.clientWidth).toFixed(5)) - iLeft
						//Entsprechend den linken und rechten Bildern und dem Bewegungsverhältnis wird die entsprechende Höhe ermittelt. let currentHeight = (this.swiperSlide[iRight].fullHeight - this.swiperSlide[iLeft].fullHeight)*Prozent + this.swiperSlide[iLeft].fullHeight
						// Höhe des Karussellcontainers swiper.el.style.height = currentHeight + 'px'
					}
				})
			}

<!--Imitation des Karusselleffekts von Ctrip-->
	<div Klasse="swiper-demo">
		<div Klasse="Swiper-Container">
			<div Klasse="swiper-wrapper">
			<!--Hier muss unbedingt die Höhe vergrößert werden, sonst gibt es Probleme! ! ! -->
				<div Klasse="swiper-slide" Stil="Höhe: 222px;">
					<div Klasse="wrap" v-for="(Element, Index) in Kategorie1" :key="index">
						<img src="../assets/wish.png" alt="">
						<span>{{item.name}}</span>
					</div>
				</div>
					<!--Hier muss unbedingt die Höhe vergrößert werden, sonst gibt es Probleme! ! ! -->
				<div Klasse="swiper-slide" Stil="Höhe: 400px;">
					<div Klasse="wrap" v-for="(Element, Index) in Kategorie2" :key="index">
						<img src="../assets/wish.png" alt="">
						<span>{{item.name}}</span>
					</div>
				</div>
			</div>
		</div>

		<div style="background: salmon; height: 80vh">Schreiben Sie Ihre eigene Benutzeroberfläche</div>
	</div>

.swiper-slide {
		Breite: automatisch;
		Höhe: 100%;
		Anzeige: Flex;
		Flex-Wrap: Umwickeln;
		Inhalt ausrichten: Abstand dazwischen;
	}
	.wickeln {
		Breite: 24%;
		Höhe: 100px;
		Anzeige: Flex;
		Flex-Richtung: Spalte;
		Elemente ausrichten: zentrieren;
		Inhalt ausrichten: zentriert;
	}
	img {
		Breite: 60px;
	}