swiperの矢印のカスタマイズについて

実現したいこと

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件

ベストアンサー

この部分を @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

yagihiro

総合スコア73

hosokawa1230

2023/06/03 12:02

ありがとうございます！解決しました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！