Slider with multiple types

Builder content link

Builder public api key

What are you trying to accomplish

  • I want to use BuilderIO for slider slides:
  • I have a slider on my frontpage
  • This slider should show different content:
    - st slide.: a BuilderIO canvas, free to design with images, text, asf…
    - 2nd slide: A random featured product image with link and description
    - 1rd slide: An image of a product category with a link to that specific category
    - 4th slide: a random banner image with link

So there are different types of content (banner, product, blog, category)

In best case, it should be possible to just drag and drop a premade “Component” into the Canvas, selecting the type of content, and the amount to show. The content could be made available via an publicly available API

TBH I dont know exactly where to start.

  • Creating a component in NextJS?
  • Having an extra API-path with prepared output?

I was hoping to find/get a starter template, which I can adpot. :face_with_peeking_eye:

Screenshots or video link

Code stack you are integrating Builder with
NextJS, react, Ruby on Rails

Hi @jezekjancom, Welcome to Forum!

I think you can implement this with Builder Drag and drop a carousel block onto your page. Every slide has Add Block functionality same as we can create any usual page on Builder. For example, you can create all required content for different slides and save it as a template or symbol named slide1,slide2, etc and then populate this in the carousel or you can directly click on the slides and add the functionality by choosing options such as required.

For say, You could create your own custom component that includes this logic, or if you wanted to still use the Builder component you could just add some custom JS in the Custom JS + CSS window:

Adding custom code in the visual editor -

Add custom JavaScript and CSS to your Builder content. Learn how to access browser events, state properties, and add custom CSS to your pages.

I hope this helps. If any issues come up while implementing this or have further questions, feel free to reach us again.

Thank you and have a nice day!