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サイト制作
-

関連記事

スライドショーの画像を切り抜いたように表示する

よくあるスライドショーで 上だけ丸みを帯びていたり、波打っていたり、三角になっていたりと フレームの中でスライドショーが動いてるやつがやりたくて調べていたところ意外と簡単にできることがわかった。 次回 ...

サイトのタイトルを画像置換する方法

よくやり方忘れてしまうのでメモ。 サイトのタイトルをh1とかで記述した場合 それを画像置換するための方法は色々あって 評価が分かれるので現時点でいいなと思っているものを。 まずはhtml <h1 ...

Amazon Product Advertising APIを使って気づいた事

目次1 APIの使い方が分からない時は2 最低価格(MinPrice)、最高価格(MaxPrice)の結果がおかしいと思ったら2.1 価格は*100にします3 一度に取得できる情報の件数4 よく分から ...

背景画像を複数指定する方法(css)

背景画像を複数指定したい時があり調べてたところ 順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・ 複数背景の使用はよく使いそうなのでメモ。 基本的には,(カンマ)区切りで続け ...

display:flexを使った時のIE10のバグに対応する

display:flex;を使った時、IE11では問題なくてもIE10で見ると色々な不具合が生じることが多い。例えば、このサイトのレイアウト。クロームで見るとこんな感じまぁまぁ均等に並んでいるように見 ...