Full screen slider

Hi all,

With various options out there, just seeing what you consider the best way to do a full screen slider that I am considering for a home page.

I need to place a graphic in the middle and some text and buttons!

There are a few ways to do it, and just seeing what you guys consider to be the best.

Cheers all

IMO that’s a tough one to call. It depends on if you’re talking image slider with an image background or just a slider with an image, text, and buttons.

Blocs carousel: works excellent for image carousels with text and buttons.

Card Designer: works well but has image heights constraints. Nice for an image slider that only has one caption for all slides. I find this has the smoothest slider transitions.

Tab Anywhere: It allows for the most customization. The possibilities are endless, just takes some skill with setup and classes. I find the transitions not always as smooth.

Done right, they all have their place. I’ve seen good and bad examples of each type. I also try to keep in mind the user’s experience. Does it load fast? Does the slider enhance or distract from my message? Try the page with and without a slider to get a better overall feel.

I’ve wrestled with this question on my photog blog. I’ve experimented with all of the above, and when it’s all said and done, for me I think a simple header image with, logo and text, is the cleanest design, and loads the fastest for my visitors.

Hope this help,
Casey

2 Likes

I am just trying something similar and experimenting the Blocs carousel using SVG images as text with a transparent background, which can then be placed on an image background if needed. You can also add a button inside the caption area.

One point I wondered about is whether there is a way to stop it pausing when the cursor is on top, because I can see some people arriving at the site and thinking it is just a single line of text if nothing moves.

1 Like

I hear you, sometimes things look great as a designer but you have to wonder what the user thinks? Don’t you just wish you could place a transparent png logo over the carousel image? Alignment can also be tricky using a carousel.

Even using tab anywhere and putting the logo and text in a column below with negative margins can load slowly and you might possibly see more than what you want the user to see.

casey

Casey

People should think I am sponsored by Whittfield but no, Tab anything is the best choice so I recommend it everyone. You could achieve multiple layouts, elements, animations and transitions on every slide and you are not limited by the amount of slides, width or height.

1 Like

I use most of his extensions also! Does great work.

It’s nice that we have some choices.

Casey

I will have a look with Tab Anything. I have the pro version but never actually used it. This is just something I wanted to complete quickly, but if Tab Anything resolves the hover issue over moving text it might be the answer.

On a side note, creating SVG images as text with transparent backgrounds that are nicely centred is greatly helped by using Affinity Publisher.

Yup, there is. Just add the custom attribute:
data-bs-pause = “false” to the carousel.

4 Likes

Thanks Jerry, that works perfectly.

Thanks all.

I have tried most of the above. I will have a play around with Tab Anything - I do not have Pro yet though…but I am guessing what I want to do can happen with the normal one.

Hi all,

Just to re-cap on my original question a while ago - but now we are on Blocs 5 and a lot of new features and brics are out, what would be the best way now to create a full screen slider as in a background image so I can add text, logos and images in the middle still.

Just want it pretty basic with it fading nicely?

I have looked at Swiper, but my client wants the logo and text in the middle to remain at all times and just have the image fade behind…I am considering doing it as a video if not.

@lucas how is swiper with Blocs 5 and on image fades, is there a way for the icon/logo/text to remain there and just the image fade - thanks.

Thanks for anyones help in advance.

Well you can use the carousel bric to do this. Make use of the caption area to add the content. Just have to think outside of the “bric / bloc” as it were. Or add static content over the top using positioning styles in the class manager.

You will find a post somewhere on here where I posted the css to make the carousel work like this.

Alternatives are just coding something up.

Or outsource the work. There is a web design company called Jam that should be able to help you out :grin:

eg, here is something with very pretty colours :crazy_face:

1 Like

Yep this is totally possible just by using BS classes. Insert your logo in the same column as Swiper and apply classes to set the logo to the centre and middle of the column.

2 Likes

Thanks @Malachiman & @Lucas ,

Yeah I did manage to build it yesterday by creating it 2 ways of images on a slideshow and cropped images at various breakpoints.

And using some basic code I used for cards a while back before I had card designer, and positioned a DIV container in the middle with my content.

But seeing if any easier tricks with no code can do this in Blocs 5.

I’ll try swiper later this week too and see how that works with it….just want a few more options on transitions, fades etc.

This is only for a basic header!

Thanks again.