swiperでデフォルトのアローアイコンを消したいです

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

スライダー機能をつけるためswiperでアローアイコンを画像を使って作成しています。
画像は添付できたのですが、どうしてもデフォルトの青い矢印が消えません(上記の添付写真をご覧下さい）。
HTMLとCSSに問題があると思うのですが、どのように修正すれば良いでしょうか？　スライダー自体は機能しています。
どうぞご回答よろしくお願いいたします。

該当のソースコード

<div class="swiper-container">
        <div class="image">

            <div class="swiper-wrapper">
              <div class=swiper-slide>
                <img src="img/mainvisual/mainvisual.png" alt="main photo">
                <span class="text1">一番伝えたいことを書く</span>
                <span class="text2">リードリードリード</span>  
                <button>お問い合わせ</button> 
                </div>
            <div class=swiper-slide>
                <img src="img/mainvisual/mainvisual.png" alt="main photo">
                <span class="text1">一番伝えたいことを書く</span>
                <span class="text2">リードリードリード</span>  
                <button>お問い合わせ</button> 
            </div>
            <div class=swiper-slide>
                <img src="img/mainvisual/mainvisual.png" alt="main photo">
                <span class="text1">一番伝えたいことを書く</span>
                <span class="text2">リードリードリード</span>  
                <button>お問い合わせ</button> 
            </div>
            <div class=swiper-slide>
                <img src="img/mainvisual/mainvisual.png" alt="main photo">
                <span class="text1">一番伝えたいことを書く</span>
                <span class="text2">リードリードリード</span>  
                <button>お問い合わせ</button> 
            </div>
            <div class=swiper-slide>
                <img src="img/mainvisual/mainvisual.png" alt="main photo">
                <span class="text1">一番伝えたいことを書く</span>
                <span class="text2">リードリードリード</span>  
                <button>お問い合わせ</button> 
            </div>

            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"><img src="img/arrow/arrow-prev.png"></div>
            <div class="swiper-button-next"><img src="img/arrow/arrow-next.png"></div>
          </div>
        </div> 

<script src="css/swiper.js"></script>
    <script>
        var swiper = new Swiper('.image', {
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          loop: true,
            pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
            clickable: true,
            },
        });
  </script>

該当のソースコード

.swiper-pagination-bullet {
    position:relative;
    top:-10px;
    width: 16px; 
    height: 16px; 
    letter-spacing:12px;
    background: #FFF; 
    opacity: 1; 
  }

  .swiper-pagination-bullet-active {
    width: 16px; 
    height: 16px; 
    letter-spacing:12px;
    background: #3F51B5 0% 0% no-repeat padding-box;; 
    opacity: 1;
  }

  .swiper-button-prev,
  .swiper-button-next { 
    position:absolute;
    top:313px;
    background-image: none; 

    }

    .swiper-button-prev {
      position:absolute;
      left:158px;
      background: url("img/arrow/arrow-prev.png") no-repeat center center / contain;

    }

    .swiper-button-next {
      position:absolute;
      left: 1132px;
      background: url("img/arrow/arrow-next.png") no-repeat center center / contain;
    }

試したこと

コードを一通り見返したこと、画像を差し替えても状況は変わりません。

補足情報（FW/ツールのバージョンなど）