こんにちは、ryohei（@ityryohei）です！
本記事では、Swiperを使用して、左右の画像が見切れて表示される中央寄せのスライダーの作り方をご紹介しています。
今回ご紹介する内容はどんな場面でも使用できるという方法ではなく、かなり限定的です。おそらく下記のようなケースでのみ有効かと思います。
- 複数の画像の幅と高さが均一のスライダー
「Swiper 左右の画像」等のキーワードで検索すると汎用的に使用することができる素晴らしいサンプルがたくさんございます。ただ、それらの方法を試しても思った動きにならないよ……という場合に試していただければと思います。
では、解説していきます。
Swiperを読み込む
まずは重要かつ基本となるSwiperの本体を読み込みます。Swiperは開発者様からCDNが提供されていますので、下記を読み込めばOKです！
<!-- Swiper CSS --> <link rel="stylesheet"href="https://unpkg.com/swiper/css/swiper.min.css"> <!-- Swiper JS --> <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
続いてSwiperのHTMLとJSで実際に動くスライダーを作成します。
Swiperでスライダーを作成する
公式サイトに掲載されている通り、Swiperの基本となるスライダーを作成します。その際にswiper-containerとラッパー要素で囲みます。
また、本記事では公式に掲載されているサンプルからpaginationとprev・nextの矢印を除外しています。私の環境で必要がなかっただけで、もし必要であれば除外しなくても大丈夫です！
HTML
<div id="app">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="sample001.jpg" alt=""></div>
<div class="swiper-slide"><img src="sample002.jpg" alt=""></div>
<div class="swiper-slide"><img src="sample003.jpg" alt=""></div>
<div class="swiper-slide"><img src="sample004.jpg" alt=""></div>
<div class="swiper-slide"><img src="sample005.jpg" alt=""></div>
</div>
</div>
</div>
後は下記のスクリプトを「Swiper」本体を読み込んだタグより下の行に記述すればスライダーが動き始めるかと思います！
JS
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
speed: 1000,
slidesPerView: 1,
autoplay: {
delay: 3000,
},
})
ただ、この状態だと画像が一枚しか表示されない状態かと思いますので、少しスタイルを追加します。
左右の画像が表示されるようにスタイルを追加する
下記は左右の画像が見切れて表示されるスライダーを作るのに一番大切なCSSとなります。
「max-width」には実際に使用する画像の幅を設定しましょう。そうすることで左右の画像が見切れた中央寄せのスライダーになります。親要素にoverflow: hiddenをつけるのを忘れないようにしましょう。
#app {
overflow: hidden;
}
.swiper-container {
width: 100%;
height: 100vh;
max-width: 940px !important;
margin: 0 auto !important;
overflow: visible !important;
}
本記事でご紹介した内容をすべて記述すると、下記のようなスライダーが完成します。EDIT ON CODE PENをクリックして全画面で見ていただくと、中央寄せになっていることがお分かりいただけるかと思います。
See the Pen Swiper Centered Slides｜Swiper by ryohei (@intotheprogram) on CodePen.31883
最後に
Swiperはとても使いやすいスライダーで、純粋なJavaScriptだけで開発されているので、jQueryを気にせずに使用できるのは素晴らしいですよね。ほとんどの要望に応えてくれるカスタマイズ性もありますので、今後もお世話になりそうです。これからも色々なスライダーを作成して、皆さんに共有していければと思います。
以上、Swiperで左右の画像が見切れて表示される中央寄せのスライダーの作り方のご紹介でした！
