Jumbotron with fading Images?

Bootstrap Studio Help
1

Hello! I have designed a page with Bootstrap-Studio. Now I would like to create a Jumbotron with fading pictures. Is that possible in Bootstrap Studio? If not, what do I have to change the code? Can someone help me? Many thanks in advance! Carl

2

I'm not sure that you would use Jumbotron for that, but you could use the component named Carousel. Just drag and drop that component to your page, insert your images etc... then you can use the following css to effective convert it to fade rather then slide. I don't remember what site I had found this code in a tutorial.

.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
}

You will have to add the class carousel-fade to the container div of the carousel.

Change <div id="carousel-1" class="carousel slide" data-ride="carousel"> to <div id="carousel-1" class="carousel slide carousel-fade" data-ride="carousel">

You can always then add custom CSS to attempt to restyle the carousel to be like a Jumbotron I suppose.

Hope that helps :)

Saj

3

Thank you very much! That helped. Now everything works like a charm. Carl