こんにちは、Ryohei(@ityryohei)です! 本記事では、Swiperでズームインした後にフェードで切り替わるスライダーの作り方をご紹介しています。 Swiperは、jQueryを必要としないJavaScriptのスライダーライブラリです。高機能でありながらシンプルな設計となっているため、初めて触る方にもとっつきやすいスライダーとなっています。 今回は、Swiperで実装することができるフェードエフェクトのスライダーに少し手を加えて、画像がズームした後にフェードで次のスライドに切り替わるスライダーを作っていきたいと思います。 本記事ではズームインの後にフェードするスライダーの実装方法を、下記の2パターンご紹介しています。 CSSのみでズームインした後にフェードで切り替わるスライダーを実装する CSS + JSでズームインした後にフェードで切り替わるスライダーを実装する キービジュ
![【Swiper】ズームインした後にフェードで切り替わるスライダーの作り方](https://cdn-ak-scissors.b.st-hatena.com/image/square/2ae38bd97eb1ac7019328959847551dbefb87266/height=288;version=1;width=512/https%3A%2F%2Finto-the-program.com%2Fuploads%2Fswiper.png)