Swiperで以下のカスタマイズをしたいのですが、
調べてもカスタマイズの方法がわからず困っています。
1.アローボタンの色、ページネーションの色を変える
2.ページネーションを大きくして、画像の下に配置
3.最初に表示される[画像1]をページ中央からスタートさせたい。
デフォルトでは左端からのスタートのようです。[自己解決しました。]
4.画像をレスポンシブ対応にしたい
vhを使い、常に画面縦幅の50%を占めるようにしたい。
一度やってみたところ、スライド間隔を設定するところがピクセル指定しかできないようで画像が詰まってしまいました。
画像の縦横比16:9を保ちつつ、縦幅50vhを維持したいのですが可能でしょうか?
5.一度画面を暗くして画像をフェードインにしたい。
6.両端の画像を少し暗くする
一度に大量の質問で申し訳ございません。
宜しくお願い致します。
サンプルページはこちらです。
http://so96.jp/www/sample.html
コードは以下です。
Html
1<head> 2<link rel="stylesheet" type="text/css" href="css/swiper.min.css"> 3<link rel="stylesheet" type="text/css" href="css/common.css"> 4</head> 5<div class="swiper-container"> 6 <div class="swiper-wrapper"> 7 <div class="swiper-slide"><img src="images/sample01.jpg" alt=""/></div> 8 <div class="swiper-slide"><img src="images/sample02.jpg" alt=""/></div> 9 <div class="swiper-slide"><img src="images/sample03.jpg" alt=""/></div> 10 <div class="swiper-slide"><img src="images/sample04.jpg" alt=""/></div> 11 </div> 12 <!-- Add Pagination --> 13 <div class="swiper-pagination"></div> 14 <!-- Add Arrows --> 15 <div class="swiper-button-next"></div> 16 <div class="swiper-button-prev"></div> 17 </div> 18 <script src="js/swiper.min.js"></script> 19<script> 20 var swiper = new Swiper('.swiper-container', { 21 pagination: '.swiper-pagination', 22 nextButton: '.swiper-button-next', 23 prevButton: '.swiper-button-prev', 24 paginationClickable: true, 25 spaceBetween: 100, 26 slidesPerView: 3, 27 loop: true, 28 keyboardControl: true, 29 }); 30 </script>
CSS
1.swiper-container { 2 width: 100%; 3} 4.swiper-wrapper .swiper-slide img { 5 width: 100%; 6}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。