bootstrap carousel slider custom arrows

Question

Okay

I'm using bootstraps carousel slider, but with custom images instead of the glyphicons supplied with it.

The problem with it however is that they are positioned towards the edges of the slider. Top left for the left arrow and top right for the right image.

I have tried changing the position, which works, but doesn't stay in their position when the window gets re sized. And i don't know where to target the code so that the code ignores that shadow that appears when hovering over the arrow.

This is the html.

<div class="container-fluid banner_fluid">
    <div class="carousel slide" data-ride="carousel" id="carousel_slider">
        <div class="carousel-inner">
            <div class="item active">
                <img src="images/home_banner_1.jpg" alt="home slide 1" />
            </div>
            <div class="item">
                <img src="images/home_banner_2.jpg" alt="home slide 1" />
            </div>
            <div class="item">
                <img src="images/home_banner_3.jpg" alt="home slide 1" />
            </div>
        </div>
        <div href="#carousel_slider" class="left carousel-control" data-slide="prev">
            <span>
                <img src="images/chevron_left.jpg" />
            </span>
        </div>
        <div href="#carousel_slider" class="right carousel-control" data-slide="next">
            <span>
                <img src="images/chevron_right.jpg" />
            </span>
        </div>
    </div>
</div>

I was using the Developer tools for a quick look and tester for different options. Position absolute does not work. Is there any other way to make it, so they appear in the same position as the original glyphicons and respond too?

Image with the suggested fix on it...

The changes made in the code so far is the addition of css and img-responsive in the class of the carousel controls themselves.

------------- banner ----------------*/

 .banner_fluid {
   padding-left:0;
   padding-right:0;
}

.carousel-control {
    position: absolute;
    top: 50%; /* pushes the icon in the middle of the height */
     z-index: 5;
    display: inline-block;

}

The other code i have tried all gave the effect fine but only in desktop view.

Answer 1

add this into your CSS file:

.carousel-control {
position: absolute;
top: 50%; /* pushes the icon in the middle of the height */
z-index: 5;
display: inline-block;
}