CODEWITHSUNDEEP
csstwitter-bootstrap
HerrimanCoder
HerrimanCoder

Reputation: 7218

Twitter Bootstrap carousel - can't change side arrows

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.

Upvotes: 6

Views: 44277

Answers (5)

zms
zms

Reputation: 109

You can view a lot of stuffs on this link http://www.landcoder.com/codes-change-style-carousel-bootstrap-367 in terms of modifying the sourcecode of bootstrap carousel.

I think your problem is the problem:

 .carousel-control {
   background: #343432;
   position: absolute;
   top: 0; /* this might be your problem */
  }

If you want to side arrows move according to the image, change top to 50%.

   .carousel-control {
     background: #343432;
     position: absolute;
     top: 50%;
  }

Upvotes: 0

Adrian Enriquez
Adrian Enriquez

Reputation: 8413

Here you go Sweat Coder. I recreated the code. I saw that you are using class="container" multiple times. and for the carousel to work properly you must include the controls inside the class="container. I replaced the <span> tags with <img> in the controls for the custom images.

Feel free to comment if you have any questions.

Fiddle

HTML

<div class="container">
    <div class="navbar-wrapper" style=";margin-top:0px">
        <div class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                </button> <a class="navbar-brand" href="#">Project name</a>

            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a>
                    </li>
                    <li><a href="#about">About</a>
                    </li>
                    <li><a href="#contact">Contact</a>
                    </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a>
                            </li>
                            <li><a href="#">Another action</a>
                            </li>
                            <li><a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li class="dropdown-header">Nav header</li>
                            <li><a href="#">Separated link</a>
                            </li>
                            <li><a href="#">One more separated link</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://www.zerogravpro.com/temp/bootstrap/images/1.jpg">
            </div>
            <div class="item">
                <img src="http://www.zerogravpro.com/temp/bootstrap/images/2.jpg">
            </div>
            <div class="item">
                <img src="http://www.zerogravpro.com/temp/bootstrap/images/3.jpg">
            </div>
        </div>
        <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <img class="chevron chevron-left" src="http://alexoliveira.me/Hawaii/images/chevron-left.png" />
  </a>
 <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <img class="chevron chevron-right" src="http://alexoliveira.me/Hawaii/images/chevron-right.png" />
   </a>

    </div>
</div>

CSS

.chevron {
    width:30%;
    position:absolute;
    top:40%;
}
.container {
    background-color:#343432;
}
.chevron-left {
    left:5%;
}
.chevron-right {
    right:5%;
}
body {
    background-color:#343432
}

Upvotes: 2

sarah s.
sarah s.

Reputation: 1

If you wrap the whole .carousel class in a .container div it should keep the carousel controls with the image and not the website itself. However, I disabled the responsiveness with my site, so this may not be exactly what you're looking for.

<div class="container">
    <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>
</div>

Upvotes: 0

DaniP
DaniP

Reputation: 38252

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

Upvotes: 10

Atal Shrivastava
Atal Shrivastava

Reputation: 692

try this

<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"><img src="images/left_arrow.png" class="img-responsive"></span>
</a>

<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"><img src="images/right_arrow.png" class="img-responsive"></span>
</a>

css

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

Upvotes: 0

Related Questions