html - Bootstrap Carousel の矢印を削除する

Question

これが私のブログのホームページです www.lowcoupling.com 私が試したブートストラップカルーセルに左右の矢印を表示したくない

.glyphicon-chevron-right{
     display:none;
}

（そして左矢印についても同じこと）しかし、うまくいかないようです。

Answer 1

これにより、ボタンが非表示になります

.right.carousel-control, .left.carousel-control {
    display: none;
}

ボタンが描画されている場所をクリックできるようにしたい場合は、次のようにします。

.right.carousel-control, .left.carousel-control {
    opacity: 0;
    filter:alpha(opacity=0); /* IE support */
}

Answer 2

私はざっと見て、あなたはほとんどそこにいますが、Bootstrap の css はあなたの css よりも優先されています。ブートストラップには次のものがあります。

.carousel-control .glyphicon-chevron-right{
    ...
    display:inline-block;
}

これに任意のポイント値を割り当てる場合、Bootstrap はスタイル「インライン ブロック」を提供するために「2 ポイント」を提供しています。

css は Bootstrap の後に読み込まれるため、「.glyphicon-chevron-right」の前に追加のクラス (および Bootstrap の 2 つのポイントに一致するもの) を配置するだけでうまくいきます。

.carousel .glyphicon-chevron-right{display:none;}

または、オーバーライドを「より強く」したい場合は、id を前に置くと、オーバーライドの値が高くなります (約 256)。

#myCarousel .glyphicon-chevron-right{display:none;}

Answer 3

その問題には簡単な解決策があります。「a」タグを削除して、スパンタグに入れるだけです

前

    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

解決後

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

それでおしまい