CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
lowcoupling
lowcoupling

Reputation: 2169

Removing arrows in Bootstrap Carousel

here is the homepage of my blog www.lowcoupling.com I'd like not show the left and right arrows in the bootstrap carousel I have tried

.glyphicon-chevron-right{
     display:none;
}

(and the same thing for the left arrow) but it does not seem to work.

Upvotes: 5

Views: 32718

Answers (4)

melih sahin
melih sahin

Reputation: 781

there is simple solve for that problem. Just remove "a" tags and with into span tags

before

    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

after solved

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

that's it

Upvotes: 0

Jaydutt Shukla
Jaydutt Shukla

Reputation: 1

This will work,

.right.carousel-control, 
.left.carousel-control 
{
     visibility:hidden;
}

Upvotes: 0

azz
azz

Reputation: 5930

This will hide the buttons

.right.carousel-control, .left.carousel-control {
    display: none;
}

If you still want to be able to click where the button is drawn, do:

.right.carousel-control, .left.carousel-control {
    opacity: 0;
    filter:alpha(opacity=0); /* IE support */
}

Upvotes: 21

TheIronDeveloper
TheIronDeveloper

Reputation: 3624

I took a quick gander, and you are almost there, but Bootstrap's css is taking precidence over your css. Bootstrap has:

.carousel-control .glyphicon-chevron-right{
    ...
    display:inline-block;
}

If you were to assign an arbitrary point value to this, Bootstrap is providing '2 points' to provide the style 'inline-block'.

Because your css is loaded after Bootstrap, simply putting an extra class (and matching Bootstrap's 2 points) before ".glyphicon-chevron-right" should do the trick.

.carousel .glyphicon-chevron-right{display:none;}

Or, if you want your override to be "stronger", putting an id in front gives your override a higher value (approx 256)

#myCarousel .glyphicon-chevron-right{display:none;}

Upvotes: 1

Related Questions