Image Carrousel or Slider on LP?

[Anonymous]

We'd like to put an image carrousel or slider on one of our landing pages, but so far we're running into some dead ends. My original plan was to drop a carrousel HTML into the template and then host the JS and CSS on the actual page in 'html' boxes. So far not working. Any one have any tips?

[Anonymous]

Difficult to tell without studying the html. But I think Marketo generated <Div> tags which encapsulate the html boxes might be one of the issues you might be having.

Rajesh

[Anonymous]

Well, I've pulled it out into a tester landing page. I've tried multiple variations of putting in or taking out the HTML, CSS, and jQuery out of the template. What has worked best is only having the HTML in the template and then putting the CSS and HTML in 'html' boxes on the actual tester landing page.

I'm thinking it has something to do with the jQuery conflicting. My understanding of jQuery isn't good enough to figure out what the actual problem is. I see in the template that theoretically the LP should be able to support the JQ, but I don't think I'm writing it correctly, or putting it in the right spot...something!

If I remove the CSS box, all of the images show up unstacked. Only removing the jQuery does nothing. If you'd care to take a look, the landing page is: http://pages.hatchearlylearning.com/slider-test.html

The slider I am trying to emulate is this: http://marktyrrell.com/labs/blueberry/

I have gotten a CSS carrousel to work seamlessly, but I'd really like the auto play functionality of a traditional jQuery slider. 

[Anonymous · Accepted solution]

Hi Rachel--I took a quick look at the code on your page. I think you need to make sure that the jQuery for your carousel is formatted in no conflict mode (http://api.jquery.com/jquery.noconflict/). Otherwise it won't work in Marketo.

[Anonymous]

Awesome! Thanks! I know just enough jQuery to have an idea of what I'm looking at, but not enought to write it or figure out what might be wrong. I appreciate the help!

[Anonymous]

Ok, so I tried it with a couple different types of No Conflict...no luck. The basic No Conflict was already built into the blank Marketo template. Not sure if I'm just not putting it in the right place or what. I think we're going to stick with a CSS slider for now, but I'll continue to play with it. Thanks for the help!

[Milena_Mitova]

Hi,

happy to share these examples here - 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.

• The css/jquery/javascript files can be found when looking at the page source - they need to be added before the closing tag of the head of the template. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://go.bauschhealth.com/rs/350-OKO-721/images/rotating-banner-javascript.js"></script>
<link href="https://go.bauschhealth.com/rs/350-OKO-721/images/Rotating-Banner-CSS.css" rel="stylesheet">​

• The html is super simple and can be put either on the template or page - depending on what you/how you need it:

<figure id="slideshow"><img src="https://go.bauschhealth.com/rs/350-OKO-721/images/B%2BLSurgicalSection-1_Header-Image530x350.jpg" constrain="true" imagepreview="false" style="height: 354px;" /> <img src="https://go.bauschhealth.com/rs/350-OKO-721/images/B%2BLSurgicalSection-3_Image530x350.jpg" style="height: 354px;" constrain="true" imagepreview="false" /></figure>

Thank you

Thank you.