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.

‍

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対応：0%を削除して100%のみ指定 */
@keyframes logoSlide {
100% {
transform: translateX(-50%);
}
}

/* ホバー時一時停止 */
.logo-slider-wrapper:hover .logo-slider-track {
animation-play-state: paused;
}

/* レスポンシブ */
@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;
}
}

/* アクセシビリティ対応 */
@media (prefers-reduced-motion: reduce) {
.logo-slider-track {
animation: none;
}
}

‍

Javascript

// JavaScript でのアニメーション（代替案）
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 = 10000; // 25秒

function animate(timestamp) {
if (!startTime) startTime = timestamp;
var progress = (timestamp - startTime) % duration;
var percentage = (progress / duration) * 50; // 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

This is a module for displaying logos of client companies, partners, etc., in a horizontally scrolling animation.Purpose of UseTo visually appeal to the service's credibility and authority (social proof) by displaying a list of client case studies or partner companies.

‍

Hubspot modules first view-1

This is a module for the top of the page (the "first view") that defines the first impression of a product or service.Purpose of UseTo be used when you want to simply place a powerful catchphrase and a call-to-action (CTA) over a background image in the first view. It is ideal for quickly setting up the common elements of a hero section.