Twitter Bootstrap carousel - can't change side arrows

Question

I have a Twitter bootstrap carousel working pretty well on my web page, but I can't get the side arrows to behave the way I want. My CSS knowledge is maybe a 5 out of 10.

Currently the "glyph" arrows are absolute positioned from the left and right edges of the window. As I shrink or grow the window, those arrows stay exactly the same distance from the window edges. Which is weird and wrong because they move all over the place on top of the carousel images. I want them to stay in fixed position on the carousel image, not on the browser window. Also I need to change the font glyphs to transparent images.

The arrows on the left and right scroll the carousel when clicked. They are not images, they're glyphs, which I guess is some kind of weird font. Here's the HTML:

<a href="#myCarousel" class="left carousel-control" data-slide="prev" style="width:0px"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a href="#myCarousel" class="right carousel-control" data-slide="next" style="width:0px"><span class="glyphicon glyphicon-chevron-right"></span></a>

Here is the css for the href:

.carousel-control {
background: #343432;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15%;
font-size: 20px;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);

And here is the css for the inner span:

.glyphicon-chevron-right {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}

And:

.glyphicon {
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}

Though it doesn't show in the raw html, when looking through Chrome dev toolbar inspector, inside the span I see this:

::before

So I need to know how to change the arrow positions to stay fixed relative to the carousel images, not the browser window. And I need to change the glyphs to some transparent arrows that I have.

Here is the actual web page in case you want to inspect any elements: http://www.zerogravpro.com/temp/bootstrap/

Thanks.

Answer 1

I have made a copy of your code in JSFIDDLE to recreate the problem.

You have an structure like this:

<div id="myCarousel" class="carousel slide">
   <div class="carousel-inner"></div>
   <a href="#myCarousel" class="left carousel-control"></a>
   <a href="#myCarousel" class="right carousel-control"></a>
</div>

Where the a tags are the navigation arrows and are positioned absolute in relation to his container #myCarousel. The actual position of the spans inside makes the arrow away from the edge.

Since the container #myCarousel is always resized with the screen then the arrows are always visible and can be at the limits with this:

• First remove the style inline for the a tags:

  <a href="#myCarousel" class="left" ... /*style="width:0px" Remove this*/>
  

• Then Add this on your CSS:

  .carousel-control {
    top:50%;
    width:auto;
    height:1em;
    background:transparent;
  }
  .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right  {
    position:static;
    display:block;
    width:auto;
  }
  .carousel-control .glyphicon-chevron-left:before {
    margin-left:0;
  }
  

And Now you Have THIS RESULT

Now to change the arrow to an image you can reset the content of the before pseudo-element and instead add your image as a background like this:

   .carousel-control .glyphicon-chevron-right:before {
       //Reset the icon
       content: " ";
       //Give layout
       display:block;
       //Your image as background
       background:url('http://yourarrow.png') no-repeat;
       //To show full image set the dimensions
       width:30px;
       height:30px;
   }

And Now you can Have THIS RESULT