Vue は Ctrip のカルーセル効果を模倣します (スライディング カルーセル、以下は高度に適応)

npm インストール swiper --save-dev

'swiper' から Swiper をインポートします
'gsap' から { TweenMax, Power2 } をインポートします

// 画面の幅と高さを再計算 resize(swiper) {
	this.clientWidth = document.documentElement.clientWidth||document.body.clientWidth;
	this.clientHeight = document.documentElement.clientHeight||document.body.clientHeight;
	this.draw(スワイパー)
},

npm インストール gsap -D

// スワイパーコンテナの高さを動的に計算する draw(swiper) {
				TweenMax.to(this.tweenObj, 0.5, {translate: swiper.translate, イーズ: Power2.easeOut,
					更新時: () => {
						translate = this.tweenObj.translate とします。
						// 左スライドのインデックス let iLeft = Math.floor(-translate / this.clientWidth)
						if (iLeft > this.slidesLength) {
							iLeft = this.slidesLength
						}
						// 右スライドのインデックス let iRight = iLeft + 1
						if (iRight > this.slidesLength) {
							iRight = this.slidesLength
						}
						for(let i=0; i< this.swiperSlide.length; i++){
							//画像の幅が全画面の場合、各画像の高さ this.swiperSlide[i].fullHeight = this.clientWidth/this.swiperSlide[i].getBoundingClientRect().width * this.swiperSlide[i].getBoundingClientRect().height;
						}
						//移動比率移動中の高さは0から1、そして0に変化します。let percent = Number((-translate / this.clientWidth).toFixed(5)) - iLeft
						// 左と右の画像と移動比率に応じて、対応する高さを取得します。let currentHeight = (this.swiperSlide[iRight].fullHeight - this.swiperSlide[iLeft].fullHeight )*percent + this.swiperSlide[iLeft].fullHeight
						// カルーセル コンテナの高さ swiper.el.style.height = currentHeight + 'px'
					}
				})
			}

<!--Ctrip のカルーセル効果を模倣-->
	<div class="swiper-demo">
		<div class="スワイパーコンテナ">
			<div class="スワイパーラッパー">
			<!-- ここで高さを増やす必要があります。そうしないと問題が発生します。 ！ ！ -->
				<div class="スワイパースライド" style="height: 222px;">
					<div class="wrap" v-for="(item, index) in category1" :key="index">
						<img src="../assets/wish.png" alt="">
						<span>{{アイテム名}}</span>
					</div>
				</div>
					<!-- ここで高さを増やす必要があります。そうしないと問題が発生します。 ！ ！ -->
				<div class="swiper-slide" style="height: 400px;">
					<div class="wrap" v-for="(item, index) in category2" :key="index">
						<img src="../assets/wish.png" alt="">
						<span>{{アイテム名}}</span>
					</div>
				</div>
			</div>
		</div>

		<div style="background: salmon; height: 80vh">独自の UI を作成する</div>
	</div>

.スワイパースライド{
		幅: 自動;
		高さ: 100%;
		ディスプレイ: フレックス;
		flex-wrap: ラップ;
		コンテンツの両端揃え: スペースの間;
	}
	。包む {
		幅: 24%;
		高さ: 100px;
		ディスプレイ: フレックス;
		flex-direction: 列;
		アイテムの位置を中央揃えにします。
		コンテンツの中央揃え: 中央;
	}
	画像 {
		幅: 60ピクセル;
	}