サイト制作メモ

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

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

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

- サイト制作メモ
-,

関連記事

cssでlistのborderを斜め線にする

このサイトのメニューでも使ってますが、やってみたかったけどなかなか方法が見つけられなかったリストの区切り(border)を直線でなく斜め線にする方法。 まずはHTMLでメニュー作成 普通にリストで作成 ...
no image

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

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

動画や連続写真からのアニメーションgifの作成

アドビのサイトにとっても分かりやすく説明されていたアニメーションgifの作り方。 連続写真や動画から簡単に作成できます。 アニメーションgifの作成方法 動画の再生やアニメーションgifのサンプル作成 ...

IE10で要素がはみ出してしまう時の対処法

なぜかIEだけ特定の要素がはみ出てしまうことはありませんか?私はよくあります。 ページ作成をしていてブラウザチェックをしているとよくぶち当たるこの問題。 何度か解決してるけど、しばらくしたら忘れてしま ...

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

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

ゆずむ自己紹介画像
name:ゆずむ
作業時間は平日9:30~17:00です。

翻訳する