Add arrows to bootstrap carousel

Question

I found this code on the internet and I want to learn from it. The following I want to do is add two arrows (without shaddow, only the arrows). One arrow left and one arrow right to move them left and right.

I have tried multiple things but nothing has worked so far. Can you guys help me out with this?

The code

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

To be clear: you don't want to use the arrows provided by Bootstrap? — Toby, Jul 24 '16 at 18:38
I want arrows on the left and the right but not with shadow and all that stuff. I only want arrows to move between the two things. — The_guy_whos_learning, Jul 24 '16 at 18:48
What I mean is.. Bootstrap includes what you're asking for by default, so I just wanted to clarify if you were aware of that, and if you are, what do you need to do that isn't provided by Bootstrap's built-in solution? Here is the default carousel: https://getbootstrap.com/examples/carousel/ — Toby, Jul 24 '16 at 18:49
Aah okey, I am sorry. Yes I know they had that default but than you get with the shadow and all that kinds of stuff and the code is a little bit different than this. Hope it will be clearer to you? And thanks for your quick response :) — The_guy_whos_learning, Jul 24 '16 at 18:56

score 0 · Answer 1 · answered Jul 24 '16 at 19:04

0

Add this css

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

answered Jul 24 '16 at 19:04

score 0 · Answer 2 · answered Jul 24 '16 at 19:06

First, add in Bootstrap's navigation arrows - they should be placed in the HTML below the .carousel-inner div:

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

Then, modify the CSS:

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

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

And for the record, SO questions work far better if you post *brief* code examples, showing what you have tried. I've answered the question, but in future you'll get far better responses right off the bat by showing what you've tried. — Toby, Jul 24 '16 at 19:07

score 0 · Answer 3 · answered Sep 14 '18 at 07:26

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

Add arrows to bootstrap carousel

3 Answers3