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

[Dave_Roberts]

Hey Dan,

If you've got Bootstrap running in your template, you could start with any of the copy/paste carousel options you get for free with Bootstrap: https://getbootstrap.com/docs/4.5/components/carousel/

It's a little trickier to set them up w/ 3 "columns" showing and then only scroll one "column" at a time, but it's much easier to do a group of 3 and scroll 3 at a time. You'd just need to replace the HTML inside the "carousel-item" with a row and 3-cols that held your speaker cards. 

There's also a tabbed interface that you could use for the three orange buttons here: https://getbootstrap.com/docs/4.5/components/navs/#javascript-behavior - you could nest a carousel in each "tab-pane" and then hide/show the different panes using the buttons at the top. You'd need to do a little work to customize the HTML and CSS, but the scripting is all setup and is class-based so it's easy to copy/paste more HTML in there to create or remove cards.

This'll work in the Marketo editor as well, so it's really easy for someone to come in and update. It'll show up (and scroll) in the LP editor, so you can use the built-in nav to scroll thru the different "slides" and click in to edit each of them as needed.

[sd-dev-user-01]

Hi Dave! 

Thanks for posting this almost 5 years ago! I was able to create a bootstrap carousel on a guided landing page and had the amount of items customizable using boolean. The problem is that, if/when one of the items are turned off the carousel still cycles through an empty container. The active class appears after the off class.

Would you happen to know if this is fixable and how to do so?