Carousel with images, text, buttons and pop up windows!

Hello! Doesn’t anyone knows if this is possible to do it on blocs?
https://drive.google.com/file/d/1Ler6TJz8tVYphvNLQERcorRU4GX37G4h/view?usp=sharing

Is a box where you slide information and if you clic on the button a popup come with more info!

You should be able to do this with a bootstrap carousel and modals and a custom code block.

I’m heading to work shortly. But if no one gets back to you. I’ll post some HTML later.

Thanks a lot! Would be great :grinning::grinning:

@Stewie_Griffin,

Here you go, a working example. Note the Footer and header, its a little rough.
But its using Owl2 Carousel and it is responsive.
You will just need to tidy up everything to suit you. (You can create another row if you like, but it will be rather long on small devices.)

Carousel-Multi-Row-Modal-Responsive.bloc (1.4 MB)

It should give you everything you need to build your project. Let me know if you have any questions.

You will probably need to also modify the carousel options script too, its in the footer. The Owl2 docs are helpful if you have never used Owl2 before.

https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html

If you want a completed tidy and styled solution, you might have to compensate me :wink: But I am more than sure you’re capable of figuring it out from here.

2 Likes

Thanks a lot! I will give it a try tomorrow! :grinning:
I was thinking once I will finish the site to ask on the freelance section for someone to fix the code I add from merlinx cause there are some mistakes! Maybe you would like to do it? My sister husband got a friend who is a programer but the guy tells me every week he will look into the day after and never happens hehe

I got a dirty mind haha :smiling_imp:

Haha Kidding!

Question: This

http://via.placeholder.com/300x200/000000

I will change it for the route of my images right?

You know my problem is sometimes I don’t know how to right in english what I want to do, so cant look on google :confused:

I hope so HAHA

Yeah, its just an example. You can do anything here, I just used Bootstrap 4 Cards, because they fit nicely in the bootstrap framework. You can add card body etc and have text like in the video originally posted.

I would probably add a class of ‘my-2’ or something on the card Div to space them a little better and you will need to adjust the Carousel script settings to the right break points and card numbers (remembering they come in pairs to make the 2 rows).

The nav buttons are off by default, but you can turn them on and style them.

That Merlinx thing seems like a bag of hurt HAHA. Im available if you want to outsource the carousel and have it all themed up with text etc :wink:

How did this work out for you @Stewie_Griffin

2 Likes

Great job @Malachiman

1 Like

I just don’t know why Blocs can’t offer this already in the Brics library already or a carousel gallery too. Come on, it was done in Adobe Muse years ago and Muse is not nearly as good as Blocs is.

Not yet cause Im still trying to figure out how to change the color of the border line on the tab bric uff!!!

Thats why the Code bric exists, the ability and flexibility of blocs is really good and getting better with each major version. It look me probably 10mins to build the basic structure for the carousel. But Im going to save that block for future use in my own projects, then I just need to mess with the CSS to suit.

With the Bric editor and API improvements and the ability to save blocs @Norm is doing a great job building out the platform for the future.

Hey, I commented on your other post. If it’s not what you were meaning, and your still stuck, can you explain a little more about what you want to do. Thanks,

Alright but I’m not a coder. I’m a designer. I think that’s why Blocs is cool because it’s easy, just saying that adding those features will be cool for non coders

I get that. Thats why this forum helps so many.

I am sure there are going to be more and more blocs and bric’s available from the user community as the API develops. There already is a Bric for Owl2 Carousel.

I saw Owl2 Carousel and other Brics, yes they are good but You have to do soem kind of coding (simple or not it’s irrelevant), I’m saying that Blocs App should have these type of options already into the Brics menu, just just drag-and-drop. Why not… i’m not a coder and have no intention to be one. I design, so I care more how to implement something visually appealing in an easy way rather than spend time to code something, which it literary waste my client’s time. I don’t do a lot of webs but when I do, They should be simple and quick. My website business are small but should be efficient and fast to deliver. I’m more in the branding and advertising industry.

@Whittfield have you used https://swiperjs.com/get-started/

Seems like Owl2 as good as it is, hasn’t been updated in some time.

Demo page has a Multi Row Slides Layout.

Yes, swiperjs is excellent. Well documented and flexible. If using swiper though, or any open source project, be mindful to namespace your code so what you’re doing doesn’t affect other projects using the same script.

1 Like