[Hubspot modules] logo slider

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);
  });
});

FAQ

Is there a limit to the number of "image and description sets" (content boxes) I can add with this module?

No, there is no upper limit. As shown in the "Field Definition" for occurrence, the setting is "max": null. This means you can add a minimum of one set and then continue to add and reorder an unlimited number of sets as needed.

Do I have to use the same layout (e.g., image on the left, text on the right) for all the sets?

No, you do not. As explained in the "Implementation Points" and "Field Definition," each set (the boxes group) contains a boolean checkbox setting called image_on_left ("Place image on the left"). This allows you to choose whether the image is on the left or the right for each set individually.

I see I can change the "Section Number" font size, but can I also change its color (section_number_color)?

No, you cannot. If you look at the "Field Definition" settings for the STYLE tab, there is a field to control the section_number_font_size, but a corresponding field to control its color (section_number_color) is not included. You can, however, change the colors for the Title, Subtitle, and Description.

Search

Search more

Related Template

Need Customization?

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

Book Free Consultation

Demo Video

Detail

Setting fields

‍

Source Code

HTML

CSS

Javascript

FAQ

Search

Related Template

Need Customization?

HubSpot Custom Workflow Guide: How to Auto-Search and Recommend Marketing Events

HubSpot Custom Workflow Guide: How to Auto-Recommend Files with Generative AI

HubSpot Custom Workflow Guide: How to "Search" for Marketing Campaigns and Use Their Data

HubSpot Custom Workflow Guide: How to "Search" for Tickets and Auto-Associate Contacts

HubSpot Custom Workflow Guide: How to "Search" for Deals and Auto-Associate Contacts