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

Highlighted
Level 6

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

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.