向引导程序转盘添加箭头

Question

我在网上找到了这段代码，我想从中学习。下面我想做的是添加两个箭头（没有shaddow，只有箭头）。向左一个箭头，向右一个箭头左右移动。

我尝试了很多方法，但到目前为止都没有效果。你们能帮我吗？

代码

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

首先，添加Bootstrap的导航箭头-它们应该放在.carousel-innerdiv:下面的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;
}

Answer 3

ol.carousel-indicators::before {
  content: '';
  width: 12px;
  height: 12px;
  margin-right: 3px;
  border: 1px solid rgb(170, 170, 170);
  border-width: 0 0 3px 3px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
ol.carousel-indicators::after {
  content: '';
  width: 12px;
  height: 12px;
  margin-right: 3px;
  border: 1px solid rgb(170, 170, 170);
  border-width: 0 3px 3px 0;
  transform: rotate;
  -webkit-transform: rotate(-45deg);
}