"Swiper"を使ったスライドで左右に画像を表示する

JQueryなしで動く"Swiper"という便利なプラグインを使ってのスライドショー。
左右に画像を表示したい時の注意点をメモ。

ダウンロードはこちらから
swiper公式サイト

使う中ですごく分かりやすかったのがswiperオプションを日本語に訳してくれたサイト。
swiperオプション(日本語)

swiper実装：html

スライドに使用する画像のパスを任意のパスに変えて下さい。

<div class="mainslide container">

  <!-- Slider main container -->
  <div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
  <!-- Slides -->
    <div class="swiper-slide"><a href=""><img src="画像のパス"></a></div>
    <div class="swiper-slide"><a href=""><img src="画像のパス"></a></div>
    <div class="swiper-slide"><a href=""><img src="画像のパス"></a></div>
    <div class="swiper-slide"><a href=""><img src="画像のパス"></a></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>
  </div>
            
		</div>

swiper実装：jsファイルの編集

左右の画像を表示するにはこのslidesPerViewの値を'auto'にします。

$(function(){

  var swiperSlide = $('.swiper-container').swiper({
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    loop:true,
    slidesPerView: 'auto',
    spaceBetween: 2
  });
	
});

swiper実装：スタイルの指定

スタイルの指定もしてください
margin:0 auto;でメイン画像を中央に。
max-width: 1000px;で幅の指定をします。

.container {
  position: relative;
  margin:0 auto;
  max-width: 1000px;
}
.swiper-container {
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
}

ただ、この指定だと画像の横幅が1000pxを超えていた場合
オプションで指定したspaceBetweenがききません。

画像にmarginやpaddingを指定しても矢印の位置がずれてしまうので containerのmax-widthに対して画像を少し小さく指定します。
(多分もっとスマートな指定があるんだと思うけど)

オプションのslidesPerView: 'auto',を指定しただけでは左右画像の表示がされないので スタイルも一緒に指定しましょう。