How to Position The Bootstrap Carousel Controls to The Extreme Right and Extreme Left

How to position the bootstrap carousel controls to the extreme right and extreme left?

you can update the element style

.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
  right: 0;  //or you can increase this
}

.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
  left: 0; //or you can increase this
}

Bootstrap 4 - change position of carousel controls

In the latest Bootstrap v4 Beta, the distance of the carousel controls from the bottom of the carousel is controlled by the bottom CSS attribute.

Therefore, it's fairly easy to control the placing of the left and right carousel control icons by setting the bottom percentage. Here's an example where I place them about 75% of the way from the center of the carousel.

.carousel-control-prev,
.carousel-control-next{
      bottom: 75%;
}

Here's a working codepen: https://codepen.io/Washable/pen/xPYJma?editors=1100

Bootstrap 4 carousel: make the slides at the left and right of the active slide visible

Demo :

Full page : https://codepen.io/devanshj/full/MXXdvO/

With code : https://codepen.io/devanshj/pen/MXXdvO

Explanation :

1. Used flickity. Because it handles the difficult things for us.

2. By default .content is in center. To move content of slides adjacent to selected slide, Added : translateX(calc( (100vw-100%)/2 + 5vw )*-1) and translateX(calc( (100vw-100%)/2 + 5vw )) to next and prev slides repectively

3. Added an event handler for flickity.scroll that adds marginLeft proportionately to the amount be which selected slide is moved so that .content comes back to the original (center) position finally

PS: I have kept autoplay on video but it doesn't work. Maybe because of being inside an iframe

Bootstrap 4 carousel slider arrows alignment

Bootstrap 4 dosen't use glyphicon's, and the framework as a whole has been rewritten in this newer version. This means that carousel snippets for bootstrap 3 likely won't work in Bootstrap 4.

The left and right arrows in the Bootstrap 4 Alpha are tied to the icon-prev and icon-next classes.

Therefore you can set them to be positioned to the extreme right and extreme left respectively with this code.

.carousel-control .icon-prev{
  left: 5px
}
.carousel-control .icon-next{
  right: 5px
}

Codepen demo: https://codepen.io/Washable/pen/EbbOXd?editors=1100

Extra space on left side of Bootstrap carousel's left arrow control

The top and left of your glyphicons are being offset by 50% of their container (i.e. 25 px).

This will keep your glyphicons consistent with the positioning of their containing anchor tags:

#carol a.carousel-control span {
    left: 0;
    margin: 0;
    top: 0;
}

How to change the bootstrap carousel indicators and controls

I can't open your example site, but you can move those indicators out of their current spot and place them where you wish. I moved them out of the header in your CodePen, wrapped them in a container and added some styles to move them below your images and center them:

<div class="carousel-controls">
    <a class="left carousel-control" href="#slideshow" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <ol class="carousel-indicators">   
        <li data-target="#slideshow" data-slide-to="0" class="active"></li>
        <li data-target="#slideshow" data-slide-to="1"></li>
        <li data-target="#slideshow" data-slide-to="2"></li>
        <li data-target="#slideshow" data-slide-to="3"></li>
    </ol>
    <a class="right carousel-control" href="#slideshow" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

CSS:

.carousel-controls{
 position:relative; 
  width:300px;
  margin:0 auto;
}

.carousel-indicators{
   top:0px; 
}

ref: http://codepen.io/anon/pen/tayfk/

---

Related Topics