Swiper.jsでスライダー全体を右寄せ・左寄せにする方法

jQueryを使わずに使える高機能なスライダーで有名な「swiper.js」

高機能なゆえ、使い方が難しい気がしましたが、使えたらスキルアップになるかと思い、あるレスポンシブサイトをリニューアルするときに使ってみました。

パソコン表示では右寄せ、スマホ表示では中央で表示で設定しました。いろいろ頑張ったのですが、結局パソコン右寄せスライダーはボツ。。

調べてみたところ、Swiperのスライダー全体を端に寄せる方法が見当たらず、よくある右寄せの方法を試してもなかなかうまくいきませんでした。

なので、成功した方法を書いていきます。

まずは、基本の書き方
スライダーごと右・左に寄せる方法
画像下に文字の入った帯をつけるのも簡単！

まずは、基本の書き方

CSSやJSのファイルをダウンロードするか、ファイルを入れたくない場合はCDNで使用することもできます。

ファイルダウンロードはここから
https://github.com/nolimits4web/swiper

CDNはこちら(2020年6月現在)

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

そして、Swiperのファイル(またはCDN)をサイトに含めます。

<!DOCTYPE html>
<html lang="ja">
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
</body>
</html>

これでページ内でSwiperが動く状態になります。

次に、Swiperを設置したい箇所に下記のコードを書き込みます。

<!-- Slider main container スライダーのメインコンテナー-->
<div class="swiper-container"> 
  <!-- Additional required wrappe　追加で必要なラッパー -->
  <div class="swiper-wrapper"> 
    <!-- Slides スライド部分-->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
  </div>
  <!-- If we need pagination ページネーションが必要な時に使う要素-->
  <div class="swiper-pagination"></div>
 
  <!-- If we need navigation buttons ナビボタンが必要な時に使う要素-->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
 
  <!-- If we need scrollbar スクロールバーが必要な時に使う要素-->
  <div class="swiper-scrollbar"></div>
</div>

設置ができたら、CSSでサイズなどを設定します。
下記は例として、幅600pxで高さ300pxのスライダーになります。

.swiper-container {
    width: 600px;
    height: 300px;
}

これで完成ではありません。もうひと頑張りです。

</body>直前に<script></script>をコピペしましょう。

<body>
  ...
  <script>
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,

    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
  </script>
</body>

↑各パーツの動き方などを指定しています。自動再生したり、再生速度を調整できたり、クリックでドラッグ(フリック)でスライドを変えられたり、と細かな設定ができます。

どんなスライダーがあるか見てから決めたい場合は、
Demos：https://swiperjs.com/demos/

やりたいことが決まっていて、ちょい足ししたい場合は、
API：https://swiperjs.com/api/

上記から見るのがよさそうです。特にデモはソースコードがすぐに見られるようになっている優れものです。このサポートの良さが、スライダーとしてここまで広がった理由なのかもしれませんね。

スライダーごと右・左に寄せる方法

Swiperのコンテナの設定は、もともと下記のように中央寄せです。

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}

marginを使って、中央位置に配置されています。このままだと中央からずらせないので、Swiperを入れる外箱を作ります。

.swiper-containerを入れる新しい箱を下記のように作ります。
今回はクラス名をslide-containerとして、<div class=”slide-container”></div>で囲みました。

<div class="slide-container">
<!-- Slider main container スライダーのメインコンテナー-->
<div class="swiper-container"> 
  <!-- Additional required wrapper　追加で必要なラッパー -->
  <div class="swiper-wrapper"> 
    <!-- Slides スライド部分-->
    <div class="swiper-slide"><img src="slide1.jpg" alt=""></div>
    <div class="swiper-slide"><img src="slide2.jpg" alt=""></div>
    <div class="swiper-slide"><img src="slide3.jpg" alt=""></div>
  </div>
  <!-- If we need pagination ページネーションが必要な時に使う要素-->
  <div class="swiper-pagination"></div>
 
  <!-- If we need navigation buttons ナビボタンが必要な時に使う要素-->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
 
  <!-- If we need scrollbar スクロールバーが必要な時に使う要素-->
  <div class="swiper-scrollbar"></div>
</div>
</div>

CSSでサイズと位置を指定していきます。

.slide-container {
  width: 100%;
}
.swiper-container {
  width: 80%;
  right: -10%;
  background-color: #fff;
}

.slide-containerを幅100％にして、.swiper-container(Swiperのスライダー全体)を外箱の幅より小さくします。そして、右寄せの場合はCSSのrightを使って、寄せていきます。寄せる幅は、(100％-小さくした％)÷2で計算したものに-(マイナス)をつけてください。

単純に100-幅の解答にマイナスをつけると、寄せすぎになります。

Javascriptも先ほどの基本に、自動再生を足したものが下記になります。

See the Pen swiper by chocolartwork (@chocolartwork) on CodePen.

左寄せの場合は、rightをleftに変更するだけです。

See the Pen Swiper_左寄せ by chocolartwork (@chocolartwork) on CodePen.