Q&A
実現したいこと
swiper.jsのボタンのカスタマイズをしたい
前提
ボタンをカスタマイズするためにCSSにどのような記述をすればよいか
発生している問題・エラーメッセージ
該当のソースコード
html <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title>Dentetu</title> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <link rel="stylesheet" href="main.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/> <body> <!---achivement--> <section id="achivement"> <h1>導入企業<span>325,000</span>社突破！</h1> <div class="swiper"> <!-- スライド要素を包む要素 --> <div class="swiper-wrapper"> <!-- 各スライド --> <div class="swiper-slide slide1"> <img src="corp_1.jpg"> </div> <div class="swiper-slide slide2"> <img src="corp_2.jpg"> </div> <div class="swiper-slide slide3"> <img src="corp_3.jpg"> </div> <div class="swiper-slide slide4"> <img src="corp_4.png"> </div> <div class="swiper-slide slide5"> <img src="corp_5.jpg"> </div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </section> <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script> <script src="main.js"></script> </body> </html> css @media screen and (min-width: 1401px) { html { font-size: 16px; } } body{ margin:0; padding:0; } h1,h2,h3,h4,h5,h6{ margin:0; } html { font-size: 0.71428571vw; overflow-x:hidden; } @media screen and (min-width:768px){ #achivement{ background-color:#d0e7ff; text-align:center; padding:5% 2% 10% 2%; } #achivement h1{ padding-bottom:2%; font-size:3.0rem; } #achivement h1 span{ font-size:4.0rem; color:#1989ff; } .swiper-button-prev:after, .swiper-button-next:after { content: ""; } } main.js const swiper = new Swiper(".swiper",{ navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" }, loop: true, //繰り返しをする centeredSlides: true, //アクティブなスライドを中央に表示 slidesPerView: 3, //スライダーコンテナにスライドを3枚同時表示 spaceBetween:50, //スライド間の距離を16pxに speed: 600, //スライドの推移時間を600ms }); ソースコード
試したこと
色々調べた結果、content:"";を使って元の矢印を上書きするとのことでしたが、矢印は消えませんでした。あと、デザインを変更する際はCDNを読み込むだけでダメだと書いてあったので、swiper-bundle.cssをダウンロードしてみましたが、変化なしでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
この部分を @media screen and (min-width:768px){ の外に出すと適用されるかと思いますのでお試しください。
css
1.swiper-button-prev:after, 2.swiper-button-next:after { 3 content: ""; 4}
投稿2023/05/31 13:23
総合スコア73
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/06/03 12:02