Webサイト制作

投稿日:2017年9月8日 更新日:

"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',を指定しただけでは左右画像の表示がされないので スタイルも一緒に指定しましょう。

- Webサイト制作
-

関連記事

簡単な背景画像のパララックス

jquaryをリンクさせる htmlファイルでsection毎に背景画像を設定 cssにて。 width:100%; background:url()center center no-repeat f ...

Atomエディタが便利です

今まで使っていたのはDreamWeaver htmlを書くようになって使っていたのはAdobeのDreamWeaverでした。 こちらも使い勝手がよく好きだったのですがAtomエディタが便利とのことで ...

jQueryで実装!画像の無限ループスライダー

よくサイトで見かけるイメージ画像がひたすら流れるやつをサイトに実装したいと思い調べたところ、下記のサイトに使いやすそうな無限ループスライダーがあったので実装。 jQueryで無限ループスライダー 無限 ...

no image

クリック開閉のタグ[jQuery+css使用]

jQuery+cssを使用したクリック開閉のタグ。 簡単に設置できるのでお世話になっています。 jQueryのタグ <script> jQuery(function($){ $('.box ...

Product Advertising APIで商品情報を取得してみる

ノンプログラマーがProduct Advertising APIでの商品情報取得にチャレンジしました。 検索しても情報が少なく苦労したので、同じような方の参考になればと思います。 amazonのPro ...