swiperの矢印設定について

Question

swiperを使ってスライド設定をしているのですが、クライアントから
『最初のページと最後のページでのみクリックできない方の矢印を非表示にしたい』との
希望があって、修正箇所とその記述方法を探しています。

https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js

と

https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css

をデフォルトのまま使ってHTMLのページ内には

---HTML記載箇所----

<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide"><img src="img/img01.png" width="600" height="851" alt=""/></div>
        <div class="swiper-slide"><img src="img/img02.png" width="600" height="851" alt=""/></div>
		<div class="swiper-slide"><img src="img/img03.png" width="600" height="851" alt=""/></div>
        <div class="swiper-slide"><img src="img/img04.png" width="600" height="851" alt=""/></div>
		<div class="swiper-slide"><img src="img/img05.png" width="600" height="851" alt=""/></div>
        <div class="swiper-slide"><img src="img/img06.png" width="600" height="851" alt=""/></div>
		<div class="swiper-slide"><img src="img/img07.png" width="600" height="851" alt=""/></div>
        <div class="swiper-slide"><img src="img/img08.png" width="600" height="851" alt=""/></div>
		<div class="swiper-slide"><img src="img/img09.png" width="600" height="851" alt=""/></div>
        <div class="swiper-slide"><img src="img/img10.png" width="600" height="851" alt=""/></div>
		<div class="swiper-slide"><img src="img/img11.png" width="600" height="851" alt=""/></div>
        <div class="swiper-slide"><img src="img/img12.png" width="600" height="851" alt=""/></div>
		<div class="swiper-slide"><img src="img/img13.png" width="600" height="851" alt=""/></div>
        <div class="swiper-slide"><img src="img/img14.png" width="600" height="851" alt=""/></div>
		<div class="swiper-slide"><img src="img/img15.png" width="600" height="851" alt=""/></div>
		<div class="swiper-slide"><img src="img/img16.png" width="600" height="851" alt=""/></div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44">
          <path class="arrow arrow-left" d="M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z" />
        </svg>
      </div><!-- .swiper-button-prev -->

      <div class="swiper-button-next">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44">
          <path class="arrow arrow-right" d="M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z" />
        </svg>
      </div><!-- .swiper-button-next -->
</div>

----スクリプト対応箇所の記述----

	<script>
		var mySwiper = new Swiper ('.swiper-container', {
  loop: false,
  slidesPerView: 1,
  spaceBetween: 10,
  centeredSlides : true,
  pagination: '.swiper-pagination',
			dynamicBullets: true ,
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  breakpoints: {
    767: {
      slidesPerView: 1,
      spaceBetween: 0
    }
  }
})
	</script>

の記述を行っていますがどこをどう直すべきか、お分かりになりますでしょうか？
デフォルトの設定ですでに最初のページと最後のページは矢印が透過された状態になっているので
これが非表示になれば問題ないのですが・・・。

公式ページ：https://idangero.us/swiper/

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。また、「jQuery」「jQueryプラグイン」もタグに追加されたほうがより良い意見をもらいやすくなります。質問は編集できるので適宜ご対応ください。

[m.ts10806]

また、念のため、プラグインの公式ページURLとHTMLコードもご提示ください。

[kei344]

（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

.swiper-button-disabled {
    display: none;
}

【Swiper API】
https://idangero.us/swiper/api/#navigation-parameters

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

Comments

[harryups10]

ありがとうございます！無事解決できました。
大変助かりました！