ブートストラップカルーセルに矢印を追加

Question

私はこのコードをインターネット上に見つけました。次の2つの矢印を追加するだけです（シャドーなし、矢印のみ）。 1つの矢印は左と右に1つの矢印を左右に動かします。

私は複数のことを試みましたが、これまでのところ何も働いていません。 皆さん、これで私を助けてくれますか？

コード

HTML：

<div class="carousel slide text-center" id="zalen-carousel"> 
            <ol class="carousel-indicators"> 
             <li data-target="#zalen-carousel" data-slide-to="0" class="active"></li> 
             <li data-target="#zalen-carousel" data-slide-to="1"></li> 
             <!-- <li data-target="#testimonial-carousel" data-slide-to="2"></li> --> 
             </ol> 





            <div class="carousel-inner"> 
             <div class="item active"> 
              <p>“ Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est, eam dicam soluta ei. Vel dicam vivendo accusata ei, cum ne periculis molestiae pri. Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam. ”</p> 
              <img class="img-responsive" src="images/achterzaal.jpg"/> 
              <h4 class="client-name">Achterzaal</h4> 
             </div> 
             <div class="item"> 
              <p>“ Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est, eam dicam soluta ei. Vel dicam vivendo accusata ei, cum ne periculis molestiae pri. Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam. ”</p> 
              <img class="img-responsive" src="images/hoofdzaal.jpg"/> 
              <h4 class="client-name">Hoofdzaal</h4> 
             </div> 
             <!-- 
             <div class="item "> 
              <p>“ Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est, eam dicam soluta ei. Vel dicam vivendo accusata ei, cum ne periculis molestiae pri. Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam. ”</p> 

              <h4 class="client-name">Onze zalen</h4> 
             </div> 
             --> 
            </div> 
    </div> 

CSS：

#section-zalen{ 
    background: #83C74F; 
    padding-bottom: 105px; 
} 
.carousel-indicators li { 
    display: inline-block; 
    width: 11px; 
    height: 11px; 
} 
.carousel-indicators { 
    bottom: -25px; 
} 
.carousel-indicators .active { 
    background-color: #f2f2f1; 
} 
.carousel-indicators li { 
    border-color: #f2f2f1; 
} 


#zalen-carousel{ 
    width: 63%; 
    margin: 0 auto; 
    margin-top: -10px; 
} 
#zalen-carousel p{ 
    color: #f2f2f1; 
    font-style: italic; 
    margin-bottom: 40px; 
} 

.client-name{ 
    color: #566366; 
    text-transform: uppercase; 
    margin-bottom: 50px; 
} 

Answer 1

このCSSを追加

.carousel-control.left , .carousel-control.right 
 
{ 
 
    background-image: none !important; 
 
}

Answer 2

まず、ブートストラップのナビゲーション矢印を追加 - 彼らは.carousel-inner divの下のHTMLに配置する必要があります：

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
     </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
     </a> 

を次に、CSSを変更：

.carousel-control { 
    background-image: none !important; 
} 

.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { 
    color: red; 
}