Hubspot modules logo slider | Hubspot lite splutions | Make Your HubSpot More Convenient, More Powerful.

Demo Video

Detail

This is a module for displaying logos of client companies, partners, etc., in a horizontally scrolling animation.

Purpose of Use
- To visually appeal to the service's credibility and authority (social proof) by displaying a list of client case studies or partner companies.
What It Can Achieve
- Editors can freely add, delete, and reorder as many logo images as needed.
- The added logos are arranged in a horizontal line and scroll infinitely and automatically.
- An optional link to a reference page can be set for each logo.
Implementation Points & Cautions
- Field Configuration: In the module's field settings, create a Group field and set it to Repeatable (a repeater). Within the group, place an Image field (for the logo image) and a URL field (for the link).
- Infinite Scroll Implementation: There are two main approaches:
  1. CSS Animation Only: Duplicate the logo list by running the HubL loop twice. Then, use CSS @keyframes and transform: translateX() to animate the entire list, achieving a smooth, library-free infinite scroll.
  2. Using a JavaScript Library: Integrate a lightweight slider library like Swiper.js and initialize it in the module's dedicated JS file. This is suitable if you need more advanced features like play/pause controls or drag-to-scroll functionality.
- Image Optimization: In the help text for editors, it is important to recommend "using PNG images with transparent backgrounds" and "keeping the height of all images consistent." This will maintain the design quality of the entire slider.

Setting fields

The following settings can be configured from the field settings of HubSpot's module settings. Please configure each from the field settings.

You can set any value for the label name, but please use the specified values for the "name" and "type".

‍

①Group HubL variable name : logos

field type : Group

If you are going to configure group settings, please set up the fields first and then create the group. You will be able to configure the group by selecting the fields you want to include in it.

‍

‍

①-1:HubL variable name : image

field type : image

‍

Source Code

HTML

{% set module_id = name ~ '_' ~ widget.id %}
<div class="logo-slider-wrapper" id="{{ module_id }}">
  <div class="logo-slider-container">
    <div class="logo-slider-track">
      {% for logo in module.logos %}
        {% if logo.image.src %}
          <div class="logo-slider-item">
            <img src="{{ logo.image.src }}" 
                 alt="{{ logo.image.alt or 'Company Logo' }}" 
                 loading="lazy">
          </div>
        {% endif %}
      {% endfor %}
      {% for logo in module.logos %}
        {% if logo.image.src %}
          <div class="logo-slider-item">
            <img src="{{ logo.image.src }}" 
                 alt="{{ logo.image.alt or 'Company Logo' }}" 
                 loading="lazy">
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>

CSS

.logo-slider-wrapper {
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  padding: 40px 0;
  position: relative;
}
.logo-slider-container {
  position: relative;
  width: 100%;
  max-width: 100%;
}
.logo-slider-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: logoSlide 25s linear infinite;
  will-change: transform;
}
.logo-slider-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 100px;
  margin-right: 60px;
  padding: 15px;
}
.logo-slider-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}
.logo-slider-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}
/* HubSpot compatibility: Removed 0% and specified only 100% */
@keyframes logoSlide {
  100% {
    transform: translateX(-50%);
  }
}
/* Pause on hover */
.logo-slider-wrapper:hover .logo-slider-track {
  animation-play-state: paused;
}
/* Responsive */
@media (max-width: 768px) {
  .logo-slider-track {
    animation-duration: 30s;
  }

  .logo-slider-item {
    width: 150px;
    height: 75px;
    margin-right: 40px;
    padding: 10px;
  }

  .logo-slider-wrapper {
    padding: 30px 0;
  }
}
@media (max-width: 480px) {
  .logo-slider-track {
    animation-duration: 35s;
  }

  .logo-slider-item {
    width: 120px;
    height: 60px;
    margin-right: 30px;
    padding: 8px;
  }

  .logo-slider-wrapper {
    padding: 20px 0;
  }
}
/* Accessibility support */
@media (prefers-reduced-motion: reduce) {
  .logo-slider-track {
    animation: none;
  }
}

Javascript

// Animation with JavaScript (Alternative approach)
document.addEventListener('DOMContentLoaded', function() {
  var logoSliders = document.querySelectorAll('.logo-slider-wrapper');

  logoSliders.forEach(function(slider) {
    var track = slider.querySelector('.logo-slider-track');
    if (!track) return;

    var startTime = null;
    var duration = 25000; // 25 seconds

    function animate(timestamp) {
      if (!startTime) startTime = timestamp;
      var progress = (timestamp - startTime) % duration;
      var percentage = (progress / duration) * 50; // Move 50%

      track.style.transform = 'translateX(-' + percentage + '%)';
      requestAnimationFrame(animate);
    }

    requestAnimationFrame(animate);
  });
});

Related Template

Need Customization?

We can customize this sample to match your specific business requirements.

Book Free Consultation

[GAS Library] Department Classification Library

The Department Classification Library is an AI-powered automatic classification tool that runs in the Google Apps Script environment. It uses ChatGPT or Gemini to automatically classify company department names into predefined business segments.

Hubspot modules Feature Section Module

This module is designed to visually showcase the features of a product or service by arranging images and text in an alternating layout. It uses scroll-triggered animations to engage users.

‍

How to Build a Reusable "Animated Counter" Module in HubSpot to Showcase Key Metrics

Learn how to implement a custom "Animated Counter" module in HubSpot to visually highlight your company's achievements and KPIs. This guide provides the complete HTML, CSS, JavaScript, and field configuration, allowing you to create a module that is intuitive even for non-developers.

[GAS Library] Automatically Format Phone Numbers in Google Sheets by Country

This guide explains how to use "PhoneFormatter," a convenient Google Apps Script (GAS) library that allows you to batch-format international phone numbers in a Google Sheet. Easily convert numbers into their proper, hyphenated format simply by providing a country name in English, Japanese, or even abbreviated form.

[GAS Library] Easy Copy-Paste! A Library to Automatically Parse Addresses in Google Sheets into Country, State, and City

Do you ever face the tedious task of managing address lists from various countries like Japan, the USA, and the UK in Google Sheets, wishing you could easily separate them by country, state, or city?

This article introduces "AddressParserLibrary," a Google Apps Script library that automates this data cleaning and parsing process with a single click.

Once you add the library, anyone can easily implement address parsing by making minor adjustments to the provided sample code. We will walk through everything from setup to execution in a step-by-step guide that is clear even for those unfamiliar with programming. Start boosting your daily productivity today!

‍