ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
スライダー機能をつけるためswiperでアローアイコンを画像を使って作成しています。 画像は添付できたのですが、どうしてもデフォルトの青い矢印が消えません(上記の添付写真をご覧下さい)。 HTMLとCSSに問題があると思うのですが、どのように修正すれば良いでしょうか? スライダー自体は機能しています。 どうぞご回答よろしくお願いいたします。
該当のソースコード
HTML
1<div class="swiper-container"> 2 <div class="image"> 3 4 <div class="swiper-wrapper"> 5 <div class=swiper-slide> 6 <img src="img/mainvisual/mainvisual.png" alt="main photo"> 7 <span class="text1">一番伝えたいことを書く</span> 8 <span class="text2">リードリードリード</span> 9 <button>お問い合わせ</button> 10 </div> 11 <div class=swiper-slide> 12 <img src="img/mainvisual/mainvisual.png" alt="main photo"> 13 <span class="text1">一番伝えたいことを書く</span> 14 <span class="text2">リードリードリード</span> 15 <button>お問い合わせ</button> 16 </div> 17 <div class=swiper-slide> 18 <img src="img/mainvisual/mainvisual.png" alt="main photo"> 19 <span class="text1">一番伝えたいことを書く</span> 20 <span class="text2">リードリードリード</span> 21 <button>お問い合わせ</button> 22 </div> 23 <div class=swiper-slide> 24 <img src="img/mainvisual/mainvisual.png" alt="main photo"> 25 <span class="text1">一番伝えたいことを書く</span> 26 <span class="text2">リードリードリード</span> 27 <button>お問い合わせ</button> 28 </div> 29 <div class=swiper-slide> 30 <img src="img/mainvisual/mainvisual.png" alt="main photo"> 31 <span class="text1">一番伝えたいことを書く</span> 32 <span class="text2">リードリードリード</span> 33 <button>お問い合わせ</button> 34 </div> 35 36 </div> 37 <div class="swiper-pagination"></div> 38 <div class="swiper-button-prev"><img src="img/arrow/arrow-prev.png"></div> 39 <div class="swiper-button-next"><img src="img/arrow/arrow-next.png"></div> 40 </div> 41 </div> 42 43<script src="css/swiper.js"></script> 44 <script> 45 var swiper = new Swiper('.image', { 46 navigation: { 47 nextEl: '.swiper-button-next', 48 prevEl: '.swiper-button-prev', 49 }, 50 loop: true, 51 pagination: { 52 el: '.swiper-pagination', 53 type: 'bullets', 54 clickable: true, 55 }, 56 }); 57 </script>
該当のソースコード
CSS
1.swiper-pagination-bullet { 2 position:relative; 3 top:-10px; 4 width: 16px; 5 height: 16px; 6 letter-spacing:12px; 7 background: #FFF; 8 opacity: 1; 9 } 10 11 .swiper-pagination-bullet-active { 12 width: 16px; 13 height: 16px; 14 letter-spacing:12px; 15 background: #3F51B5 0% 0% no-repeat padding-box;; 16 opacity: 1; 17 } 18 19 .swiper-button-prev, 20 .swiper-button-next { 21 position:absolute; 22 top:313px; 23 background-image: none; 24 25 } 26 27 .swiper-button-prev { 28 position:absolute; 29 left:158px; 30 background: url("img/arrow/arrow-prev.png") no-repeat center center / contain; 31 32 } 33 34 .swiper-button-next { 35 position:absolute; 36 left: 1132px; 37 background: url("img/arrow/arrow-next.png") no-repeat center center / contain; 38 } 39 40
試したこと
コードを一通り見返したこと、画像を差し替えても状況は変わりません。
補足情報(FW/ツールのバージョンなど)
回答2件
あなたの回答
tips
プレビュー