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

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

Answer 2

添加此css

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

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

添加箭头到bootstrap carousel

3 个答案: