Swiperを使ったスライダーの画像を、ズームインしながら切り替えるサンプルです。
デフォルトのフェード切り替えにちょっと拡大アニメーションを足しただけなので、すぐ挙動を確認できます。

DEMO

わかりやすいように、別ページにDEMOを用意しました。

DEMOを確認する

HTML

<div class="swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="https://blog.grinee.net/demo/images/image1.png"></div>
		<div class="swiper-slide"><img src="https://blog.grinee.net/demo/images/image2.png"></div>
		<div class="swiper-slide"><img src="https://blog.grinee.net/demo/images/image3.png"></div>
	</div>
	<div class="swiper-pagination"></div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

Swiper

こちらのスライダーはSwiperを使用しています。
サンプルコードを実行するには、SwiperのCSSとJSを読み込んでください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

CSS

.swiper {
	max-width: 400px; /* 画像幅と同じ */
	margin: 0 auto;
}
.swiper-slide img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 2s ease; /* delayと同じ秒数 */
}
.swiper-slide-active img {
	transform: scale(1.5);
}

JavaScript

const swiper = new Swiper('.swiper', {
	loop: true,
	autoplay: {
		delay: 2000, // 自動切り替えの間隔
		disableOnInteraction: false, //自動再生
	},
	pagination: {
		el: '.swiper-pagination',
		clickable: true,
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
});