var $slides = $('.swiper-slide');
var duration = .5;
var swiper = new Swiper('.swiper-container',{
direction:'vertical',
autoHeight: true,
slidesPerView: 'auto',
resitance: true,
resitanceRatio: 0,
watchSlidesProgress : true,
virtualTranslate : true,
on:{
activeIndexChange: function(){
var swiper = this;
if(this.activeIndex){
//...something
}
this.update();
if(this.slides.length - 1 == (this.activeIndex + 1)){
gsap.to($slides.not('.swiper-slide-active, .swiper-slide-next'), {opacity:0, duration:0, delay: .5});
}
else{
$slides.css('opacity',1);
}
},
setTranslate: function(translate){
var swiper = this;
var slides = swiper.slides;
var $slide;
var progress;
var scale;
var translate = swiper.getTranslate();
for(var i=0; i < slides.length; i++ ){
$slide = slides.eq(i);
progress = Math.max(Math.min($slide[0].progress, 1), -1);
scale = Math.max(1 - Math.abs($slide[0].progress), 0.75);
if(progress > 0){
//if($slide.data('scale') === 'true' ){
if($slide.hasClass('data-scale') ){
gsap.to($slide, { transform: `translateY(${ -swiper.slidesGrid[i] }px) scale(${ scale })`, duration: duration});
}
else{
gsap.to($slide, { transform: `translateY(${ translate }px) scale(${ 1 })`, duration: duration});
}
}
else{
gsap.to($slide, { transform: `translateY(${ translate }px) scale(${ 1 })`, duration: duration});
}
}
}
}
});
<div class="contents">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide data-scale" ><div>slide 01</div></div>
<div class="swiper-slide data-scale"><div>slide 2</div></div>
<div class="swiper-slide data-scale"><div>slide 3</div></div>
<div class="swiper-slide" ><div>크기 안줄어듬</div></div>
<div class="swiper-slide" ><div>크기 안줄어듬</div></div>
</div>
</div>
</div>
.contents{
height: 100vh;
}
.swiper-container{
height: 100vh;
}
.swiper-slide{
padding-bottom:24px;
}
.swiper-slide > div{
display:flex;
align-items: center;
justify-content: center;
height:300px;
padding:24px 0;
transform-origin: 50% 0;
border-radius: 10px;
background:#eee;
box-sizing: border-box;
}
External resources loaded into this fiddle: