MENU
CLOSE
STUDYWEBSITE Edit : 2019.09.19 Update : 2023.01.30

Swiper.jsで複数の記事をスライドさせつつ、一番左だけ大きいサイズにするやり方

Contents
  1. HTML
  2. JS
  3. CSS

まず、、このブログ「LABO」をリニューアルしました…!そこで今回紹介するのはLABOのTOPページのようなスライドです。記事3枚でスライドさせ、画面を小さくしていくと見切れていき、スマホの時は1枚でスライドするような仕様です。
 


基本的なSwiper.jsの導入は省き、一つだけサイズを変える上でポイントとなった設定やcssのとこだけまとめたいと思います。

Contents
  1. HTML
  2. JS
  3. CSS

HTML

ここは基本的にSwiper.jsのやり方に従うだけです。今回は6枚を動的に流しているので、ソース上ではこんな感じになります。

JS

ポイントは”slidesPerViewオプションでautoを設定し、後述するcssで横幅に対してのサイズを指定してしまう”こと。
onSlideChangeStartはスライドがはじまったら発火する関数、onSlideChangeEndはスライドが完了したら発火する関数なので、ここでクラスを付け外しして、できる限り滑らかな指定をcssで設定しようと思い記述しました。が、意味があったか..な.?という結果になりましたw

CSS

色々記述がありすぎるので、一枚大きくするうえで重要な箇所のみ抜粋します。

・小さい記事の幅や高さを設定

transitionの設定を入れないとスライドがずれたりしたので、私的にはとても大事でした。

・大きい記事の幅や高さを設定
一番左にきたスライドには(.swiper-slide-active)が勝手に振られます。センターモードにしている場合は、真ん中のスライドに振られます。なので、このクラスに対して大きくなった場合のサイズを指定します。

他にも、大きいスライドだけ文字の大きさや装飾などを変更したい場合は、このクラス(.swiper-slide-active)を使ってcss調整を行います。

以上が私がやってみたときの重要ポイントでした。

Web Trends Lab.編集部

KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。