Example of guided landing pages with "carousel"-like functionality

[Dan_Stevens_]

We have a project underway that will require more content than the viewable portion of the page can display.  We already have the approach in place for our new website, but the team was wondering if something like this could be built into a Marketo guided landing page template.  Has anyone ever done this using guided landing pages?  Is it even possible to build this sort of functionality into a template?  If so, I'd love to see some examples.

[SanfordWhiteman]

Typically a carousel is initialized and controlled via a JS library (pure JS or -- ugh -- jQuery) by passing in either [a] a list of image paths or [b] an existing HTML/IMG block which is then slurped up and reorganized when the library loads.

The [a] approach isn't good for templating because you want users to be able to choose images.

The [b] approach would be totally fine for a GLPT.  You can create image placeholders and then the user can populate with Marketo assets.

I wouldn't necessarily expect the the carousel to render properly within the LP Editor, though.  You'd probably have to preview the page to make sure everything loaded in actual browser order.

[Grégoire_Miche2]

To complement Sanford's answer, it is not that easy to include a custom HTML block in a Guided LP (see here: )

The trick is to create a text variable in the template and use that variable to fill in HTML code or a JS script ion the page.

-Greg

[SanfordWhiteman]

You wouldn't need a custom HTML block, though.

Just a preset # of mktoImg areas.  Then the user fills them in by choosing from the asset lib.  This is actually better as far as end-user lockdown IMO.

[Casey_Grimes]

First off, I'm assuming with this answer that you have a fixed number of rotating assets that will always be roughly the same. If it's widely varying per page using the template, then go construct something with AngularJS on a free-form landing page. Do not pass go, do not collect $200. In fact, if I'm guessing correctly and you plan to have dynamic speakers pop up per location on the same page, you really should just go code this in AngularJS.

However, I'm going to assume that you'll have roughly the same amount each time and that these are going to be separate landing pages. In that case you could just use something a la carousel.js​ and have each of your item divs be Marketo rich text areas (since it looks like you're using both photos and text in the mockup.)

[Dan_Stevens_]

Courtney, the goal here is to offer maximum flexibility - so no, we will not have a fixed number of assets here.  Since this doesn't seem to be feasible using guided landing page templates, we'll have to remove this feature from the scope of these pages.  Right now, the emphasis is on building out appropriate guided landing page templates and move away from the traditional landing pages.  Appreciate the input.

[SanfordWhiteman]

But you don't need to fix the # of assets. You need to allocate a maximum # of assets -- but surely for an LP you can say, "the carousel has up to 30 images." Unused ones are OK.

[Milena_Mitova]

Hi, I have built 2 types of "carousels" or should I say simple slideshows. Both on guided templates. 

- One allows for the image on the top banner to slide only:

https://go.bauschhealth.com/2020-03-31RotatingBanner.html

 - the other allows for the image + text to slide.

https://go.bauschhealth.com/caroussellogos.html

Hope this is useful. I am using a very simplistic javascript + css, happy to share. Thanks

[Ekaterina_Byank]

Hi, would you be able to share how you create the first carousel with images changing? Thanks

[Milena_Mitova]

Sure, email me at milena.mitova@bauschhealth.com, happy to send you the code. Thank you