Swiperパーツのカスタマイズ方法
左右矢印の色を変更する
| 設定要素 | 詳細 |
| 設定なし | 左右目印色は 青 になり |
| swiper-button-white | 左右目印色は白になり |
| swiper-button-black | 左右目印色は 黒 になり |
上級者向け
カスタマイズ方法
| 手順 | 詳細 |
| １ | <div class="row">の下<style></style>書きます |
| ２ | swiper-container の後に nms-plugin-*** を書きます（***は数字に変わる） |
| ３ | ソースの最末 </div>の後に </div> も一個書きます |
| ４ |
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> を下記のように変ります。 <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"></div> <div class="swiper-button-next"> <div class="fa fa-angle-right fa-3x"> </div> </div> <div class="swiper-button-prev"> <div class="fa fa-angle-left fa-3x"> </div> </div> |
| ５ | 下表を参考して下さい、<style>...</style>間に好きな設定を記入してください。 |
| 設定要素 | 詳細 |
| .nms-plugin-*** .swiper-button-next, .nms-plugin-*** .swiper-button-prev { background-image: none; color: #222; top:47%;} | 左右目印の色です |
| .nms-plugin-*** .swiper-pagination-bullet-active { background-color: #222; } | 丸目印の色です |
| .nms-plugin-*** .swiper-slide-next, .swiper-slide-prev { opacity: 0.4; } | 左右画像の透明度 |
| .nms-plugin-*** .swiper-slide-active:hover{ opacity: 0.4; } | 真中画像の透明度 |
| 例 | |
|
<div class="row">
<style> .nms-plugin-20180424043848 .swiper-slide-active:hover, .nms-plugin-20180424043848 .swiper-slide-next, .swiper-slide-prev { opacity: 0.4; } .nms-plugin-20180424043848 .swiper-button-next, .nms-plugin-20180424043848 .swiper-button-prev { background-image: none; color: #222; top:47%;} .nms-plugin-20180424043848 .swiper-pagination { position: initial; } .nms-plugin-20180424043848 .swiper-pagination-bullet-active { background-color: #222; } </style> <div class="swiper-container nms-plugin-20180424043848 " data-perview="2"> <div class="swiper-wrapper" data-id="1cb40aa9-4381-4eaf-8c03-18c2572a5391" isbind="1"> <div class="swiper-slide"> <a href="$ActivityUrl$" target="_blank"><img src="$ImgUrl$" alt="Alternate Text" class="img-responsive" /></a> </div> </div> <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"> </div> <div class="swiper-button-next"> <div class="fa fa-angle-right fa-3x"> </div> </div> <div class="swiper-button-prev"> <div class="fa fa-angle-left fa-3x"> </div> </div> </div> </div> |
swiper apiオプション
| オプション名 | 解説 |
| < div class="swiper-pagination hidden" > | 非表示を切り替える |
| < div class="swiper-pagination" > | swiper-container内におけるHTMLの構造が、Swiperを利用する上でベースになります。 |
| オプション名 | 解説 | 初期値・設定可能値 |
| data-perview | 一行で見えるスライド数を設定できます。 | 1（初期値） |
| data-pergroup | 複数のスライドを１つにまとめる。スワイプした際にグループで囲った全てが同時にスライドする。 | 1（初期値） |
| data-pergroup-xs | スマートフォンで複数のスライドを１つにまとめる。スワイプした際にグループで囲った全てが同時にスライドする。 | 1（初期値） |
| data-percolumn | 一列で見えるスライド数を設定できます。 | 1（初期値） |
| data-freemode | ページネーションをクリックしてスライドが動作するように指定するオプション。 | false（初期値） |
| data-dynamicbullets | ページネーションに強弱がつくようになる。アクティブなのは大きく、それ以外は小さく。 | false（初期値） |
| data-paginationtype |
‘bullets’、’fraction’、’progress’、’custom’、
paginationの形の種類を選択できる。丸い円か、数字か、barか、カスタム。 |
bullets（初期値）
fraction（設定可能値） progress（設定可能値） custom（設定可能値） pagination（設定可能値） |
| data-loop | 最後のスライドの時にnextのボタンを押したりすると最初のスライドに行く。逆も同様 |
true（初期値）
false（設定可能値） |
| data-perview-xs | スマートフォンで一行で見えるスライド数を設定できます。 | 1（初期値） |
| data-autoplay | 自動再生 |
true（初期値）
false（設定可能値） |
| data-speed | スライド時のスピード | 300（初期値） |
| data-centeredslides |
画像中央寄せ
1番目のデータを先頭に表示する場合はfalse |
true（初期値）
false（設定可能値） |
| data-spacebetween | 画像の余白 | 10（初期値） |
| オプション名 | 解説 | 初期値 |
| data-swiper-autoplay | 何秒待ってスライドするかの設定。（注意：swiper-slideの後に追加して下さい） | 2500 |