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.)

[Dave_Roberts]

@SanfordWhiteman here's a simple example of the difference between the two functions that I just tested in our sandbox. I've included a link to the LP here for reference. This link has the not-working (1st) version of the code running on the page. In both cases with the code, the live version of the page in a browser displays as expected but there's a difference within the context of the Marketo LP Editor experience.

The expected behavior here is for the form to "float" above the other content blocks and next section using a class ("floating-form-on") which is added to the body with a toggle in the LP Variables menu (boolean values = "floating-form-on | floating-form-off").

If the body has "floating-form-on", I want to find the form.mktoForm element on the page and add a z-index class to the form container (div.mktoForm) and parent section.

I know how much you love you some jQuery and I guess I'm just too "front-end" to appreciate Javascript fully but in any case, bear in mind that it's not my strong suit so maybe I'm being more creative here than formal 😉 

Here's an example where you can check out the HTML in the inspector:

https://mktosbx.digitalpi.com/RM1-FLEX-LP---Framework---Merkle.html

SCENARIO 1: Using DOMContentLoaded

Below: Within the LP Editor experience, the form element registers the CSS to position it absolutely so it sort of hides behind the other content blocks and the following section. Here's a look at the CSS coming from the toggled class on the body element (floating-form-on).

Below: Here's a look at what I see within the editor experience:

document.addEventListener("DOMContentLoaded", (event) => {
        if($('body').has('.floating-form-on')){
            // add z-index-2 to the form container
            $('form.mktoForm').parents('div.mktoForm').addClass('z-index-2');
            // add z-index-2 to the section
            $('form.mktoForm').parents('section').addClass('z-index-2');
        }
        else {
            // do nothing
        }
});

SCENARIO 2: Using window load and document ready

Below: Here's the expected result shown within the LP Editor experience. For whatever reason this one displays the floating form as expected and you can see that it not only overlaps the content blocks in the MAIN section but also the blocks in the following AUX section below.

window.addEventListener('load', function () {
    $(document).ready(function(){
        if($('body').has('.floating-form-on')){
            // add z-index-2 to the form container
            $('form.mktoForm').parents('div.mktoForm').addClass('z-index-2');
            // add z-index-2 to the section
            $('form.mktoForm').parents('section').addClass('z-index-2');
        }
        else {
            // do nothing
        }
    });
});

[SanfordWhiteman]

There’s no situation where window.load has fired but the document is not yet ready. It’s simply not possible, readyState is always complete when load fires.

Thus there’s nothing else to wait for after window.load, the $(document).ready() listener is superfluous as ready() fires immediately.

[sd-dev-user-01]

AHH thank you so much! The script perfectly. I would share with you but you know..NDA's lol.