サイト制作メモ

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

- サイト制作メモ
-,

関連記事

no image

cssで作るタイトルやテキストの装飾色々メモ

タイトルの背景を斜めボーダーにしたい 斜めボーダー背景。 色の組み合わせで色々な雰囲気がつくれる。 ただ、背景に柄が入ると中のテキストが読みにくくなるので、色は注意! HTMLは入れ子にしています。 ...

画面の縦幅いっぱいに背景画像を表示する

画面全体に背景画像を表示するには、 background:url('画像を指定'); background-size:cover; でできますが、 いやいや、一画面だけでなくその下にもコンテンツがあっ ...

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

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

パーマリンクの設定

stinger8のダウンロードサイトにはパーマリンク設定を"postname"にしているとあったのでそのように設定してみた。 で、実際に新規で記事を追加すると 記事のタイトルが反映されURLは以下のよ ...

cssだけで画像をテキストの形に切り抜き表示してみる

面白かったのでメモ。 テキストの形に切り抜くやつです。 どこかで使えそう。 まずはhtml 何でもいいので適当なクラスか何かあたえておいてください。 <p class="text-kirinuk ...

翻訳する