0

I need a (responsive) bootstrap carousel - much like the standard example: http://getbootstrap.com/javascript/#carousel

However, I need each images to 'cover' the containing div. So if it's a different ratio to the image the top & bottom, or left & right will be not visible - avoiding black bars.

I also need the left & right navigation buttons present, as well as the dot indicators allowing navigation & for users to see which image they are on.

I also need text within each slide that changes with each slide / isn't static. I found this but it has static text - I was unable to get the text moving - it also lacks the navigation buttons and dot indicators: https://bootsnipp.com/snippets/featured/fullscreen-background-carousel

How can I do this? thx.

niico
  • 11,206
  • 23
  • 78
  • 161

1 Answers1

1

If you are OK with using background images, you could use the CSS property background-size: cover to make the background image cover the entire carousel slide div. Then your text would also be inside the slide div and sit on top of the background image. You can read more about background-size here.

Here is a Fiddle demonstrating the use of background images with background-size: cover.

If you need the images to load in img tags, then you could use this solution that uses JavaScript to determine if the image is wide or tall, and then applies the appropriate CSS styling.

stackingjasoncooper
  • 623
  • 5
  • 13
  • Thanks - would it be possible to add a code example implementing what you're suggesting, I'm unclear on exactly how to do it? I have no strong views on using background images or not. – niico Jul 12 '17 at 13:12
  • @nicco - I added a Fiddle link to my answer. I think using a background image is fine. Just know that the height of your slides (which have the class `.item`) should be set with CSS if you want them all to be the same height. – stackingjasoncooper Jul 12 '17 at 13:33