Vue imitates Ctrip's carousel effect (sliding carousel, highly adaptive below)

npm install swiper --save-dev

import Swiper from 'swiper'
import { TweenMax, Power2 } from 'gsap' 

// Recalculate screen width and height resize(swiper) {
	this.clientWidth = document.documentElement.clientWidth||document.body.clientWidth;
	this.clientHeight = document.documentElement.clientHeight||document.body.clientHeight;
	this.draw(swiper)
},

npm install gsap -D

// Dynamically calculate swiper-container height draw(swiper) {
				TweenMax.to(this.tweenObj, 0.5, {translate: swiper.translate, ease: Power2.easeOut,
					onUpdate: () => {
						let translate = this.tweenObj.translate
						// Left slide index let iLeft = Math.floor(-translate / this.clientWidth)
						if (iLeft > this.slidesLength) {
							iLeft = this.slidesLength
						}
						// Right slide index let iRight = iLeft + 1
						if (iRight > this.slidesLength) {
							iRight = this.slidesLength
						}
						for(let i=0; i< this.swiperSlide.length; i++){
							//When the image width is full screen, the height of each image this.swiperSlide[i].fullHeight = this.clientWidth/this.swiperSlide[i].getBoundingClientRect().width * this.swiperSlide[i].getBoundingClientRect().height;
						}
						//Movement ratio The height changes from 0 to 1 to 0 during movement let percent = Number((-translate / this.clientWidth).toFixed(5)) - iLeft
						//According to the left and right pictures and the movement ratio, the corresponding height is obtained let currentHeight = (this.swiperSlide[iRight].fullHeight - this.swiperSlide[iLeft].fullHeight )*percent + this.swiperSlide[iLeft].fullHeight
						// Carousel container height swiper.el.style.height = currentHeight + 'px'
					}
				})
			}

<!--Imitating Ctrip's carousel effect-->
	<div class="swiper-demo">
		<div class="swiper-container">
			<div class="swiper-wrapper">
			<!--You must increase the height here, otherwise there will be problems! ! ! -->
				<div class="swiper-slide" style="height: 222px;">
					<div class="wrap" v-for="(item, index) in category1" :key="index">
						<img src="../assets/wish.png" alt="">
						<span>{{item.name}}</span>
					</div>
				</div>
					<!--You must increase the height here, otherwise there will be problems! ! ! -->
				<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>{{item.name}}</span>
					</div>
				</div>
			</div>
		</div>

		<div style="background: salmon; height: 80vh">Write your own UI</div>
	</div>

.swiper-slide {
		width: auto;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.wrap {
		width: 24%;
		height: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	img {
		width: 60px;
	}