Geek Answers Handbook

Twitter Twitter Bootstrap Cassette - Cannot Change Side Arrows

I have a Twitter bootstrap carousel that works very well on my webpage, but I can't make the side arrows behave the way I want. My CSS knowledge is probably 5 out of 10.

Currently, the glyph arrows are absolutely located to the left and right of the window. When I squeeze or enlarge the window, these arrows remain at the same distance from the edges of the window. Which is strange and wrong, because they move everywhere on top of carousel images. I want them to remain stationary in the carousel image, and not in the browser window. I also need to change the font glyphs to transparent images.

The arrows on the left and right scroll the carousel when pressed. They are not images, they are glyphs, which, I think, are a 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 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 range:

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

Although it does not appear in raw html, when I look at the Chrome dev toolbar inspector, inside the scroll I see this:

 ::before

Therefore, I need to know how to change the position of the arrows in order to remain stationary relative to the images of the carousel, and not the browser window. And I need to change the glyphs to some transparent arrows that I have.

Here is a real web page if you want to check any items: http://www.zerogravpro.com/temp/bootstrap/

Thanks.

+6
source share
5 answers

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

You have a 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 navigation arrows and are absolute with respect to its #myCarousel container. The actual position of the spans inside makes the arrow from the edge.

Since the #myCarousel container #myCarousel always changing using the screen, the arrows are always visible and can be within this:

  • First remove the inline style for the a tags:

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

  • Then add this to 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 contents of the before pseudo-element and instead add your image as a background as follows:

  .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

+10
source

Here you play Sweat Coder. I recreated the code. I saw that you use class="container" several times. and for the carousel to work properly, you must enable the controls inside class="container . I replaced the <span> tags with <img> in the controls for 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 }
+2
source

try it

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

If you wrap the entire .carousel class in a .carousel div, it should save the carousel controls with the image, not with the site itself. However, I turned off responsiveness with my site, so this may not be exactly what you are 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>
0
source

You can view a lot of materials at this link http://www.landcoder.com/codes-change-style-carousel-bootstrap-367 in terms of changing the bootstrap carousel source code.

I think your problem is the problem:

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

If you want the side arrows to move in accordance with the image, change the top by 50%.

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

More articles:


All Articles