I'm trying to create a Bootstrap carousel with images that have text over them. To do that, I need to make the position of the images in the carousel absolute. Here is an image in the carousel before I made it absolute
I need the testimonials and this is LA text over the image. So I make it absolute and this happens
And no matter what I do, I can't seem to fix it.
Here is my Slim markup
.container#testimonialsSection
.carousel.slide#testimoniesCarousel data-ride="carousel"
ol
li data-target="#testimoniesCarousel" data-slide-to="0" class="active"
li data-target="#testimoniesCarousel" data-slide-to="1" class="active"
li data-target="#testimoniesCarousel" data-slide-to="2" class="active"
li data-target="#testimoniesCarousel" data-slide-to="3" class="active"
li data-target="#testimoniesCarousel" data-slide-to="4" class="active"
.carousel-inner role="listbox"
.item.active
= image_tag("losangelesskyline.jpg", :class => "img-responsive")
h2.center Testimonials
p This is LA
.item
= image_tag("newyorkskyline.jpg")
p This is NY
.item
= image_tag("miamiskyline.jpg")
p This is Miami
.item
= image_tag("bostonskyline.jpg")
p This is Boston
.item
= image_tag("atlantaskyline.jpg")
p This is Atlanta
a.left.carousel-control href="#testimoniesCarousel" role="button" data-slide="prev" onclick=""
span.glyphicon.glyphicon-chevron-left aria-hidden="true"
span.sr-only Previous
a.right.carousel-control href="#testimoniesCarousel" role="button" data-slide="next" onclick=""
span.glyphicon.glyphicon-chevron-right aria-hidden="true"
span.sr-only Next
And here is my SCSS
.carousel-control.left, .carousel-control.right {
background-image: none
}
#testimonialsSection {
height: 70%;
width: 100%;
}
#testimoniesCarousel {
width: 100%;
height: 100%;
h3 {
font-size: 300%;
}
p {
text-align: center;
margin-left: 5%;
margin-right: 5%;
font-size: 200% !important;
}
img {
position: absolute;
height: 70%;
width: 100%;
}
.carousel-control.left .glyphicon {
position: absolute;
left: 0;
top: 35%;
margin-left: 0;
color: #D6D6D6;
}
.carousel-control.right .glyphicon {
position: absolute;
right: 0;
top: 35%;
margin-right: 0;
color: #D6D6D6;
}
}
Any help would be greatly appreciated.
