JQueryなしで動く”Swiper”という便利なプラグインを使ってのスライドショー。
左右に画像を表示したい時の注意点をメモ。
ダウンロードはこちらから
swiper公式サイト
使う中ですごく分かりやすかったのがswiperオプションを日本語に訳してくれたサイト。
swiperオプション(日本語)
まずはhtml。
スライドに使用する画像のパスを任意のパスに変えて下さい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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> |
こちらがjsファイル。
左右の画像を表示するにはこのslidesPerViewの値を’auto’にします。
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function(){ var swiperSlide = $('.swiper-container').swiper({ nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', loop:true, slidesPerView: 'auto', spaceBetween: 2 }); }); |
スタイルの指定もしてください
margin:0 auto;でメイン画像を中央に。
max-width: 1000px;で幅の指定をします。
|
1 2 3 4 5 6 7 8 9 10 11 |
.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’,を指定しただけでは左右画像の表示がされないので
スタイルも一緒に指定しましょう。
