Slider with multiple types

General
, ,
1

Builder content link

Builder public api key
fe16958c8a554c0cbdd68cf4ba028616

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

Bildschirmfoto 2022-09-16 um 11.49.32
Bildschirmfoto 2022-09-16 um 11.49.321147×643 54 KB

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

2

Hi @jezekjancom, Welcome to Builder.io 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.

image
image2491×1597 281 KB

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 Builder.io visual editor - Builder.io

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!