swiperで矢印ボタンを枠の外に出し、画像にリンクをつけるとリンクの矢印ボタンが表示されます。消したいです。

質問させて頂きます。
まだ作りかけなのですが、swiper で下記のように画像にリンクをつけました。
(動作するか試すために画像一枚だけにつけてみました)

(画像を添付させて頂きます。問題の箇所を枠で囲っております)
通常であれば問題なく設置できるようですが、矢印ボタンを枠の外に出している場合、
リンクのボタンが画像の下に現れます。(検証済)

※画像を添付させて頂きます。問題の箇所を枠で囲っております
(矢印マークは鍋の絵にしてみました。動作しています)

検証を見てみると、aタグの下に、自動的にリンクの矢印マークが配置されていることが確認とれました。これはswiperの矢印ボタンを枠の外に設置すると起る現象のようです。
矢印ボタンを枠の中に設置しなおして試してみたところこのような現象は起きなかったので確かだと思います。
そしてstylesの項目の赤色の枠で囲った部分の設定 (element.style{}) を全て無効にしてみるとリンクの矢印は消え、デザインも崩れることなく動画をクリックすればリンク先にちゃんと飛んでくれます。

しかしながら、element.style の変更はどこに・どのように書けばよいのでしょうか
cssファイルの書き換えは出来るようになったのですが、これはcssではないですよね? 右横にファイル名がないのでどうしたら変更できるか分かりません。

どなたかやり方を教えて頂けるとありがたいです。
もしくは、勉強して出来るようになりたいので参考資料など教えていただけると幸いです。

必要かどうか分かりませんが、念のためコードも記載させて頂きます。

CSSコード
<div class="swiper-custom-parent margin-auto">
<div class="swiper-container slide1 box-shadow-O">
      <div class="swiper-wrapper ">
      <div class="swiper-slide"><a class="swiper-a" href="https://youtu.be/3whlfiXwPwo"><img src="./../imagen/youtube/01-Y-curry.JPG" alt="Curry"></a></div>
      <div class="swiper-slide"><img src="./../imagen/youtube/03-Y-arroz-blanco.jpg" alt="Arroz blanco"></div>
      <div class="swiper-slide"><img src="./../imagen/youtube/04-Y-sushi.jpg" alt="Sushi"></div>
      <div class="swiper-slide"><img src="./../imagen/youtube/12-Y-oyakodon.jpg" alt="Oyakodon"></div>
      <div class="swiper-slide"><img src="./../imagen/youtube/18-Y-yakimeshi.jpg" alt="Yakimeshi"></div>
      <div class="swiper-slide"><img src="./../imagen/youtube/21-Y-omurice.jpg" alt="Omurice"></div>
      </div>
<div class="swiper-pagination"></div>
</div>
<div class="swiper-button-prev prev1"></div>
<div class="swiper-button-next next1"></div>
</div>

script.jsコード

var swiper = new Swiper('.slide1', {
  //loop: true,
  slidesPerView:3,
  pagination: { el: '.swiper-pagination', clickable: true },

  navigation: {
    prevEl: '.prev1',
    nextEl: '.next1',
  },

  scrollbar: { el: '.swiper-scrollbar', },
});
//========================== slide2 ==========================
var swiper = new Swiper('.slide2', {
//loop: true,
slidesPerView:3,
pagination: { el: '.swiper-pagination', clickable: true },

navigation: {
  prevEl: '.prev2',
  nextEl: '.next2',
},

scrollbar: { el: '.swiper-scrollbar', },
});

cssコード
/*矢印ボタンを外に出すタグ*/
.swiper-custom-parent{
    max-width: 80%;
    position: relative;}  /*ボタン表示の為*/

/*スワイパーを囲う枠*/
.swiper-container{
    max-width: 87%;
    border-radius: 20px;}

.swiper-slide img {
    max-width: 100%;
}
element.stkle

/*ページネーション同士の間余白*/
.swiper-pagination-clickable
.swiper-pagination-bullet{margin: 3px;}

/*ページネーションをbottomギリギリに*/
.swiper-container-horizontal>
.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction{bottom: 0px;}

/*ページネーションの色*/
.swiper-pagination-bullet-active {
    background: green;}

/* ボタンを画像に */
.swiper-button-prev {
	background-image: url(./../logo/holla.gif);
    transform: scale(-1, 1); /* 左右反転 */
    left: 0;}

.swiper-button-next {
	background-image: url(./../logo/holla.gif);
    right: 0;}

/*ボタン画像の大きさ・配置*/
.swiper-button-prev,
.swiper-button-next{
    width: calc(var(--swiper-navigation-size) /50 * 50);
    height: calc(var(--swiper-navigation-size) /50 * 50);
    border-radius: 50%;
    outline: none;/*ボタンを押したときのエフェクトの枠を消す*/
    background-size: 100%;}

/* 矢印を消す */
.swiper-button-next::after, .swiper-button-prev::after{
    font-size: 0;}

gpsoft

2021/03/28 23:13

試してみましたが、再現しませんでした。他のライブラリやブラウザのaddonが影響してませんか? savefrom.netの何かとか…。

yukiko-yukiko

2021/03/29 09:35

貴重なコメントありがとうございます!!! そういうことがあるのですね! savefrom.net使っております! ということは savefrom.netをお使いになられている方のブラウザでは私と同じように表示されてしまうのでしょうか。。。私のパソコンとブラウザだけの問題であることを祈ります。そして先ほどやっと削除できました! 解決方法を記入させて頂きます。