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? 

[Dave_Roberts]

@sd-dev-user-01 glad to see this helped you get something going, always nice to see things from so long ago come back to the surface.

In order to get the boolean setup to work the way you've got it in there (on/off classes) you'd need to modify the carousel js to skip any .carousel-item with the "off" class which makes the on/off thing a little less of an ideal approach. In the past, I've just gone in and removed the HTML for the carousel-item that I didn't want to display, but this isn't the most intuitive approach for anyone without some HTML know-how so it can be difficult for some end-users to manage for sure.

Another approach might be to add a script to the page to remove any carousel item with the off class from the DOM and this might avoid the empty slide? Maybe something like this:

<script>
window.addEventListener('load', function () {
  $(document).ready(function(){
    $('.carousel-item.off').remove(); // remove hidden carousel items
  });
});
</script>

In my experience, adding the 'load' event listener with a nested 'ready' function has worked to get scripts to run within the context of the LP editor so that's why there's kind of redundant layers of loading going on there. 

If you've got this setup on a page somewhere that you could send me a link to I'd be happy to fiddle around in the inspector tool in the browser to see if I can get something to work if this doesn't do the trick for ya. Feel free to DM a link as well if you're more comfortable going that route.

[SanfordWhiteman]

---

In my experience, adding the 'load' event listener with a nested 'ready' function has worked to get scripts to run within the context of the LP editor so that's why there's kind of redundant layers of loading going on there. 

---

Oof, that looks terrible. 🙂 Can you post an example where typical DOMContentLoaded doesn’t work? (Gimme the full HTML.)