Infinite Smooth Scroll Carousels

One option in the Experience Canvas is around creating carousels as a separate experience and then embedding that experience into a parent one. It is possible to use some custom code to create a carousel that appears that smoothly scrolls, without needing to change scenes. Please review this example on a mobile device:

Example Infinite Smooth Scroll Carousel

Please note that embedding this type of carousel will require an iframe to load the experiences. Because an iframe is required, a carousel will not load as quickly as an experience without an iframe. Therefore, it is often recommending to put embedded carousels below the fold, so they aren't visible during the initial load. If you encounter any difficulties embedding a carousel or have any questions, I recommend reaching out to support@getfastr.com for assistance.

To embed a carousel, please follow the below steps:

1. To create this type of carousel, you'll need to use the following code. Please note that you'll need to update the height, width, and the script for the experience embed. These sections have been labeled in bold:

   <script>
   var carouselWidth = REPLACE_WIDTH_HERE;
   var carouselHeight = REPLACE_HEIGHT_HERE;
   </script>
   <div id="Infinite-Scroll">
   INSERT_SCRIPT_HERE
   </div>
   <style>
   #Infinite-Scroll{
   overflow: hidden;
   margin: auto;
   }
   
   ::-webkit-scrollbar {
   width: 3px;
   height: 3px;
   }
   
   ::-webkit-scrollbar-track {
   box-shadow: inset 0 0 5px grey; 
   border-radius: 10px;
   }
   
   ::-webkit-scrollbar-thumb {
   background: #000; 
   border-radius: 10px;
   }
   </style>
   <script>
   document.querySelector('#Infinite-Scroll').style.width=(carouselWidth/(carouselHeight+5))*document.body.getBoundingClientRect().height+'px';
   </script>

2. As a first step, you'll need to create the mobile carousel. This should be one scene that is longer than your typical mobile variants. For the example experience above, I have used 1881 for the width, and 400 for the height. Please take both of these numbers, and paste them into the template code above. You'll want to replace "REPLACE_WIDTH_HERE" and "REPLACE_HEIGHT_HERE" with only the exact numbers, do not include "px" or anything other text. 
   
   
3. After this carousel has been created, you'll need to go back to the dashboard. You will want to publish this carousel experience so that it is live. Once you have published the carousel, click this "Copy Code" button to get a script tag. This should be pasted in the code above where I have labeled "INSERT_SCRIPT_HERE":
   
4. Your code block is now ready to be used. In the final parent experience, you'll want to place an HTML widget on the canvas, and paste your updated code from the template above. For my example, I've made this HTML widget the same height as my child experience, which was 400px. However, you can make the width of this HTML widget any value. 
   
   

This should be all set! If you have any issues, please reach out to support@getfastr.com