前提・実現したいこと
jQueryプラグイン・スライダーの「Swiper」を試してます。
動作確認はできたのですが、矢印の位置を変えたいです。
下の添付画像のように、矢印が画面の両端に配置されてしまい操作し辛いです。
矢印は画像の両サイドに配置したいのです。
該当のソースコード
SwiperはCDNで取得してます。
html
1<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> 2 3<div class="swiper-container"> 4 <div class="swiper-wrapper"> 5 <div class="swiper-slide"><img class="item-show__img-bg" src="/images/cate-farm.jpg" alt=""></div> 6 <div class="swiper-slide"><img class="item-show__img-bg" src="/images/cate-help.jpg" alt=""></div> 7 <div class="swiper-slide"><img class="item-show__img-bg" src="/images/cate-lend.jpg" alt=""></div> 8 <div class="swiper-slide"><img class="item-show__img-bg" src="/images/cate-repair.jpg" alt=""></div> 9 <div class="swiper-slide"><img class="item-show__img-bg" src="/images/cate-skill.jpg" alt=""></div> 10 <div class="swiper-slide"><img class="item-show__img-bg" src="/images/cate-teach.jpg" alt=""></div> 11 </div> 12 <div class="swiper-button-prev"></div> 13 <div class="swiper-button-next"></div> 14 </div> 15</div> 16 17<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> 18<script type="text/javascript" src="/js/swiper.js"></script>
javascript
1var swiperMain = new Swiper('.swiper-container', { 2 speed: 600, 3 loop: true, 4 navigation: { 5 nextEl: '.swiper-button-next', 6 prevEl: '.swiper-button-prev', 7 }, 8});
試したこと
Swiperの標準オプションで探しましたが見当たらず。
ググりましたが、矢印のデザインを変更する方法ばかりがヒットします。
そもそも基本的な使い方が間違ってるのでしょうか?
CSSをDLしてみました。
ここを上書きする方法になるでしょうか?
https://unpkg.com/swiper@6.4.10/swiper-bundle.css
を「swiper-button-prev」で検索したもの↓
css
1.swiper-button-prev, 2.swiper-button-next { 3 position: absolute; 4 top: 50%; 5 width: calc(var(--swiper-navigation-size) / 44 * 27); 6 height: var(--swiper-navigation-size); 7 margin-top: calc(-1 * var(--swiper-navigation-size) / 2); 8 z-index: 10; 9 cursor: pointer; 10 display: flex; 11 align-items: center; 12 justify-content: center; 13 color: var(--swiper-navigation-color, var(--swiper-theme-color)); 14} 15.swiper-button-prev.swiper-button-disabled, 16.swiper-button-next.swiper-button-disabled { 17 opacity: 0.35; 18 cursor: auto; 19 pointer-events: none; 20} 21.swiper-button-prev:after, 22.swiper-button-next:after { 23 font-family: swiper-icons; 24 font-size: var(--swiper-navigation-size); 25 text-transform: none !important; 26 letter-spacing: 0; 27 text-transform: none; 28 font-variant: initial; 29 line-height: 1; 30} 31.swiper-button-prev, 32.swiper-container-rtl .swiper-button-next { 33 left: 10px; 34 right: auto; 35} 36.swiper-button-prev:after, 37.swiper-container-rtl .swiper-button-next:after { 38 content: 'prev'; 39} 40.swiper-button-next, 41.swiper-container-rtl .swiper-button-prev { 42 right: 10px; 43 left: auto; 44} 45.swiper-button-next:after, 46.swiper-container-rtl .swiper-button-prev:after { 47 content: 'next'; 48} 49.swiper-button-prev.swiper-button-white, 50.swiper-button-next.swiper-button-white { 51 --swiper-navigation-color: #ffffff; 52} 53.swiper-button-prev.swiper-button-black, 54.swiper-button-next.swiper-button-black { 55 --swiper-navigation-color: #000000; 56}
先輩方アドバイスいただけないでしょうか?
宜しくお願いします。
回答1件
あなたの回答
tips
プレビュー