CODEWITHSUNDEEP
csstwitter-bootstrap
James Ives
James Ives

Reputation: 3365

Bootstrap Carousel Controls Outside of Carousel

I'm attempting to push my Bootstrap Carousel controls outside of the image but I seem to be having some problems. I've been able to get them out of the image by setting width: 0%; on .carousel-controls but the problem is it's not completely responsive and it seems that the left control is closer to the image compared to the right control.

What would be the correct way to do this? I feel like I'm going down the wrong path.

#myCarousel {
  margin-left: 30px;
  margin-right: 30px;
}

.item img {
  margin-left: auto;
  margin-right: auto;
}

.selected img {
    opacity:0.5;
}

.carousel-caption {
    position: relative;
    left: auto;
    right: auto;
}

.carousel-control.left,
.carousel-control.right {
  background: none;
  border: none;
}

.carousel-control.left {
  margin-left: -45px;
}

.carousel-control.right {
  margin-right: -45px;
}

.carousel-control {
  width: 0%;
}

.glyphicon-chevron-left, .glyphicon-chevron-right {
  color: grey;
  font-size: 40px;
}

Here's a JSFiddle: https://jsfiddle.net/guhx5sjL/1/

Upvotes: 9

Views: 23311

Answers (2)

Thrashzone13
Thrashzone13

Reputation: 109

It will make your page scroll horizontally. You'd better add .col-10 .mx-auto to .carousel-inner. Always remember to check side effects of your additional pure css on bootstrap modules.

Upvotes: 2

crazymatt
crazymatt

Reputation: 3286

Is this what you are looking for? If so its just some quick changes in your CSS:

#myCarousel {
  margin-left: 50px;
  margin-right: 50px;
}

.carousel-control.left {
  margin-left: -25px;
}

.carousel-control.right {
  margin-right: -25px;
}

I updated your js.fiddle here.

Upvotes: 10

Related Questions