3 Replies Latest reply on Sep 22, 2017 1:22 AM by Dave Roberts

    How to add an image slider on a landing page?

    Devika R

      Hi,

       

      Would like to know if we would be able to add an image slider on a landing page?

      We tried adding the boot strap js and css  cdn to the landing page template as well as the landing page. But though the file is loaded, the functionality is not working. The image slider we would like to add on the landing page is - https://codepen.io/zuraizm/pen/vGDHl

        • Re: How to add an image slider on a landing page?
          Dave Roberts

          Hey Devika-

           

          Im not sure that Bootstrap will have much to do with the slider from codepen.

          One option (toward Bootstrap) would be to look at the "carousel" options that Bootstrap offers and customize one of those to work for you (https://getbootstrap.com/docs/4.0/components/carousel/ )

          Another, if you're sold on the codepen slider, would be to also call in jQuery thru a script which you can get (like the bootstrap js&css) at jQuery CDN . This will load the library that the codepen slider uses to do it's thing.

           

          To implement the codepen solution:

          1. In the <head> of your document, add a <style> ... </style> and then replace the ... with all the stuff in the CSS box (in Codepen)

          2. Below that (still in the <head>), add the <script> from the jQuery CDN link above.

          3. Below that (still in the <head>), type in a new <script> ... </script> and then replace the ... with all the stuff in the JS box (in Codepen)

          4. Add the HTML in between the <body> and </body> tags.

          .... that should be it.

           

          I'd recommend the Bootstrap approach if you're on the fence, simply because it is generally more widely supported and refined. This is especially true if you're using Bootstrap already for the rest of your layout, it'd be like taking the long-way home, both ways to do Bootstrap and the Codepen solution, but you I don't think you'd see any functional falloff by mashing em' together.

           

          Let me know if you've got any questions?

           

          -Dave

          developer, Digital Pi

          1 of 1 people found this helpful
            • Re: How to add an image slider on a landing page?
              Devika R

              Hi Dave,

               

              We do have a slider in place which we use in our website, but we would like to know how we integrate/use this on a marketo landing page.

               

              -Devika

                • Re: How to add an image slider on a landing page?
                  Dave Roberts

                  Want to post the code for your LP Template and I can implement the solution I mentioned above. The Codepen solution has some additional styles for the "frame" of the slide (the page itself) that you'll want to remove.

                   

                  Basically, you'll need to piece each section of that Codepen solution you found into your LP Template. You also need to add jQuery to your page - but that's not as scary as it sounds, it's a lot like adding a tracking code or <script>. To get your <script> tag, click that jQuery link I posted, I'd recommend going with the 3.x version and getting the "minified" code. If you click on the word minified in that section, you should get a little pop-up box that'll give you the <script> you place in the <head> of your template to call in jQuery, which helps your HTML "do stuff" like slide and be animated.

                   

                  Let me know if you've got a more specific question here, or if there's something you're stuck on that I could help you through?

                  1 of 1 people found this helpful