前提・実現したいこと
現在、スライダーの実装を行っております。
その際、写真のようなスライダーのデザインがありました。
(斜線部分は画像)
このレイアウトでスライダーを実装しようとして現在はSwiper.jsを使用しているのですが、うまくいきません。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
HTML
1<!-- Slider main container --> 2<div class="swiper-container fadein"> 3 <!-- Additional required wrapper --> 4 <ul class="swiper-wrapper"> 5 <!-- Slides --> 6 <li class="swiper-slide"> 7 <a href="#" target="_blank"> 8 <img src="<?=get_template_directory_uri()?>/img/index/#"> 9 </a> 10 </li> 11 <li class="swiper-slide"> 12 <a href="#" target="_blank"> 13 <img src="<?=get_template_directory_uri()?>/img/index/#"> 14 </a> 15 </li> 16 <li class="swiper-slide"> 17 <a href="#" target="_blank"> 18 <img src="<?=get_template_directory_uri()?>/img/index/#"> 19 </a> 20 </li> 21 <li class="swiper-slide"> 22 <a href="#" target="_blank"> 23 <img src="<?=get_template_directory_uri()?>/img/index/#"> 24 </a> 25 </li> 26 </ul> 27 <div class="swiper-button-prev"></div> 28 <div class="swiper-button-next"></div> 29</div> 30 31 32///////////////////////////// 33//スライダー(JS) 34 let mySwiper = new Swiper ('.swiper-container', { 35 loop: true, 36 slidesPerView: 2.5, 37 spaceBetween: 10, 38 centeredSlides : false, 39 // width: 2150, 40 // height:5000, 41 navigation: { 42 nextEl: '.swiper-button-next', 43 prevEl: '.swiper-button-prev' 44 }, 45 pagination: { 46 el: '.swiper-pagination', 47 type: 'bullets', 48 ////////////////////////////////// 49 //type: 'bullets' 50 //type: 'fraction' 51 //type: 'progressbar' 52 ////////////////////////////////// 53 }, 54 breakpoints: { 55 992: { 56 slidesPerView: 1.2, 57 spaceBetween: 10, 58 centeredSlides : true, 59 } 60 } 61 }); 62///////////////////////////// 63
試したこと
slidesPerView: 2.5の値を変更したり、WidthやHeightを変更してみましたが、うまくいきません。
どなたかご教授いただけませんか?
もし、その他のプラグイン等で実装可能ならSwiperにはこだわっていません。
よろしくお願い致します。