いつもお世話になっております。
【Swiper】を使って、下記のようなスライダーを作成したいのですが、
上手く作成できず、悩んでおります。
■作成したいスライド
・フル画面
・自動で動く
・レスポンシブ対応
・prevとnextのボタンは赤のスライドの左右に配置
・緑と青のスライドは半透明(opacity:0.8くらいのイメージ)
・緑と青のスライドはクリック不可能(可能であれば)
■できていないこと
・prevとnextのボタンは赤のスライドの左右に配置
↓
どうしても画面の左右に配置されてしまう
・緑と青のスライドは半透明(opacity:0.8くらいのイメージ)
・緑と青のスライドはクリック不可能(可能であれば)
↓
そもそも、緑と青のスライドが画面内に全て見えるように表示されてしまう
例:各スライドの横幅が350pxの場合、100pxくらい見える程度で良いところが、350px全て表示される
■Swiper ※参考にしたサイト
http://sho-tem.com/archives/321
https://www.imd-net.com/blog/2016/05/31-235955/
サイト内で違う形のスライダーも使用したいため、
汎用性が良いと評価の高いSwiperを用いております。
恐れ入りますが、ご教示の程よろしくお願いいたします。
■【追加】ソースは以下です。
HTML
1<div class="swiper-container"> 2<div class="swiper-wrapper"> 3 4 <div class="swiper-slide"> 5 <!-- Slide-01 コンテンツを挿入する --> 6 </div> 7 8 <div class="swiper-slide"> 9 <!-- Slide-02 コンテンツを挿入する --> 10 </div> 11 12 <div class="swiper-slide"> 13 <!-- Slide-02 コンテンツを挿入する --> 14 </div> 15 16 <div class="swiper-slide"> 17 <!-- Slide-02 コンテンツを挿入する --> 18 </div> 19 20</div> 21 22 <div class="swiper-button-prev"></div> 23 <div class="swiper-button-next"></div> 24 25</div>
CSS
1.main_slider { width:100%; margin:20px 0; text-align:center; padding:10px; } 2.main_slider img { max-width:840px; width:100%; }
javascript
1<script> 2var swiper = new Swiper('.swiper-container', { 3 4 slidesPerView: 3, 5 autoplay: 5000, 6 speed: 1000, 7 loop: true, 8 pagination: '.swiper-pagination', 9 10 // ナビゲーションボタン 11 nextButton: '.swiper-button-next', 12 prevButton: '.swiper-button-prev', 13 14 // 1スライドごとの余白 15 spaceBetween: 20 16 17}); 18</script>
回答1件
あなたの回答
tips
プレビュー