How to Add a Rotating Logo Showcase on Your Rocketspark Website

A rotating logo showcase can be a great way to display client logos or brand partners on your Rocketspark website. You can either use Elfsight's widget or add custom code for a continuous scrolling carousel. 

Option 1: Elfsight Widget

To avoid using the custom code below, it is recommended to use the Elfsight logo widget: Elfsight logo showcase widget. Elfsight does have a free plan but there may be fees depending on what you wish to do. If you use Elfsight, here is How to add an Elfsight widget to the website

Option 2: Use the Rocketspark Carousel Slider feature

You can use the Rocketspark slider feature for this. But the logos will not continuously scroll, it will be a static switch between the logos: How to use a Carousel Slider

Option 3: Using Custom Code for a Rotating Logo Carousel - Advanced option

If you'd rather not use a third-party service and would like the logos to continuously scroll, you can use custom code. 

Steps to Add Custom Code (for Right-to-Left Rotation)

1.  Add logos to a file upload page

   • Create a new hidden page and upload all logos through a picture block
   • Right-click on each image and copy the image address (you will need these image addresses to add to the code below). 
     
     

2. Add a code Block:

   • Click + Add block on the page, and select the code block from the options.

3. Paste the Code:

   • Copy the following code and paste it into the HTML block:
     

     <style>
     .marquee-right .marquee {
     --marquee-width: 100%;
     --marquee-height: 200px;
     /* --marquee-elements: 12; */ /* defined with JavaScript */
     --marquee-elements-displayed: 6; /* Default for desktop */
     --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
     --marquee-animation-duration: calc(var(--marquee-elements) * 9s);
     }
     
     /* Mobile version: Adjust marquee-elements-displayed for smaller screens */
     @media (max-width: 768px) {
     .marquee-right .marquee {
     --marquee-elements-displayed: 3; /* For mobile */
     --marquee-width: 100%;
     --marquee-height: 100px;
     }
     }
     
     .marquee-right .marquee {
     width: var(--marquee-width);
     height: var(--marquee-height);
     overflow: hidden;
     position: relative;
     }
     .marquee-right .marquee-content {
     list-style: none;
     height: 100%;
     display: flex;
     animation: scrollRight var(--marquee-animation-duration) linear infinite;
     }
     @keyframes scrollRight {
     0% { transform: translateX(0); }
     100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
     }
     .marquee-right .marquee-content li {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-shrink: 0;
     width: var(--marquee-element-width);
     max-height: 100%;
     font-size: calc(var(--marquee-height)*3/4); /* 5rem; */
     white-space: nowrap;
     }
     .marquee-right .marquee-content li > img {
     height: 100%;
     }
     </style>
     <script>
     window.addEventListener("load", (event) => {
     const root = document.querySelector(".marquee-right .marquee");
     const marqueeElementsDisplayed = getComputedStyle(root).getPropertyValue("--marquee-elements-displayed");
     const marqueeContent = root.querySelector("ul.marquee-content");
     
     root.style.setProperty("--marquee-elements", marqueeContent.children.length);
     
     for(let i=0; i<marqueeElementsDisplayed; i++) {
     marqueeContent.appendChild(marqueeContent.children[i].cloneNode(true));
     }
     });
     </script>
     <div class="marquee-right">
     <div class="marquee">
     <ul class="marquee-content">
     <li><img src="IMAGE URL" alt="IMAGE NAME">
     </li>
     <li><img src="IMAGE URL" alt="IMAGE NAME">
     </li>
     <li><img src="IMAGE URL" alt="IMAGE NAME">
     </li>
     <li><img src="IMAGE URL" alt="IMAGE NAME">
     </li>
     <li><img src="IMAGE URL" alt="IMAGE NAME">
     </li>
     </ul>
     </div>
     </div>

   Code	Details
   --marquee-height: 200px;	Adjusts the height of the slider and the logos within it to scale - Adjust the pixels to suit
   --marquee-elements-displayed: 6; /* Default for desktop */	The number of images that display on a desktop screen at any one time - adjust the number to suit
   --marquee-elements-displayed: 3; /* For mobile */	The number of images that display on a mobile screen at any one time - adjust the number to suit
   --marquee-animation-duration: calc(var(--marquee-elements) * 9s);	The speed that the slider moves - adjust the number of seconds to suit
   @keyframes scrollRight { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }	This is the setting that makes the images slide right. To change to move left, rename all examples of right to be left and change the 0% to be 100% and the 100% to be 0%.
   <li><img src="IMAGE URL" alt="IMAGE NAME"> </li>	Images - replace the IMAGE URL with the URL of your image. You may want to upload the images to a hidden page so you can then right-click and copy the URL. Rename the IMAGE NAME to be the name of the image you are using. You can add as many images as you like.

   
   Note: Marquee code has been deprecated, so while it may work at the time of creating this guide, it may not work in the future as browsers update.