html - 将箭头添加到引导轮播

Question

我在网上找到这段代码，想学习一下。下面我要做的是添加两个箭头(没有阴影，只有箭头)。一个左箭头和一个右箭头来左右移动它们。

我尝试了很多东西，但到目前为止没有任何效果。 你们能帮我解决这个问题吗？

代码

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;
}