Hero carousel questions

I’m trying to create a single page website with:

  • A Hero Carousel - with a sticky menu bar at the top of page, but I cannot see a Bloc option for such
  • Text over the carousel - fine
  • A logo over the carousel - as per text over the carousel - seems no way of doing this?
  • A button for scrolling to a target - fine
  • No forward or backward controls - cannot see way of disabling those, they are padlocked.
  • No mouse-over pausing of the carousel - i.e. it keeps playing until the button us pressed, or the page is scrolled

Any help would be appreciated!

Place this code in the page header to remove the next and prev arrows.

.carousel .carousel-nav-controls { visibility: hidden; }

There was a thread the other day about adding text over the carousel and a logo would be similar, there are a couple of ways you can do it, it all depends on what you need the end result to be.

1 Like

Thanks @Malachiman - I’ve saved the code - but is a hero carousel even possible?

Again lots of ways to do this, you could probably use the Header Carousel Edge to edge bric and apply a custom class with a height of 100vh and width auto.

The other option is to use a code bric and use background images and Bootstrap carousel code.

Or even use something like Swiper.js like I said, lots of options.

Just used that, perfect!

Am using the Carousel Edge to Edge Bric, but whatever I apply the vh100 to (Bloc, Container, Row, Column, Carousel) either the carousel indicators drop out below the carousel, or I just get white space filling the viewport area under the Carousel.

In other words, the Carousel is not adapting shape to fill the viewport.

You need to apply it to the image.

So sorry to keep troubling you…!

I applied my .vh100 class to the first image, it automatically went to all three… but only shows on the Bloc.

And still doesn’t make the carousel fill the viewport. :upside_down_face:

You also need to set the bloc padding to full screen.

Sorry @Malachiman, that just vertically centres the carousel in the viewport - so I get white space above and below the carousel, instead of just below.

If this is getting too much hassle let me know!!!

I made a quick test a little bit ago and it worked for me. I am heading off to bed though, its late here.

I guess this is good morning then!

I opened a fresh project to start again, as the .vh100 applying itself to the Bloc instead of the images seemed like a glitch. It was.

(One thing’s different - the previous and next buttons are no longer padlocked so I can now just use Visibility controls make the arrows invisible, instead of the code.)

But… I’m still getting white space above and below the carousel… I’m sure I’m missing something basic here, but cannot fathom what it is.

It’s because you’ve set the padding to full screen. This isn’t going to work with a carousel because the image will scale depending upon the browser width. So the combination of image aspect ratio and the browser window size will determine whether white space will appear beneath the image. Setting it at full screen maintains the image aspect ratio but sets it in the middle of a full screen This creates the space above and below. Only background images and videos will maintain a full screen regardless of image or video aspect ratio. It does this by cropping the background as the window gets narrower. Clearly, this isn’t something you can do with a carousel.

Text over the carousel isn’t a problem - just use the caption area. Adding a logo will be a little more tricky and is usually best handled by incorporating the logo as part of the carousel images. This way, the logo will be in the correct position regardless of screen size or device size.

Thanks guys @hendon52 @Malachiman

Interesting, because I just built a full screen carousel doing basically that tonight for a client. I did nest a bunch of Div Brics to add swiper.js slides and an overlay over the top of it all.

1 Like

that would work!!

Of course it does. :innocent:

EDIT: Actually maybe I should have read your whole post lol. I was a little lazy. Yes background images is the way to go for sure.

Hi @Malachiman,

I was wondering if you could provide a sample .bloc file to show how you created the full screen hero carousel using swiper.js. Your previous sample files have been very helpful to me when using Blocs.

Thanks in advance. :slight_smile:


Pretty much just used the structure I posted above, it follows the swiped.js documentation.

The container is 100% V and H. And each slide has a class with a background image.

1 Like