Marquee Logo Slider Loop
User
Assistant
To display 4 logo items at a time and have them scroll in a repeating loop (like a marquee), you can achieve it with a mix of CSS and possibly a little JavaScript for smooth infinite looping. Here's a working setup using **CSS animation only** for a seamless, infinite loop:
—
### ✅ HTML (no changes needed in the loop logic):
<div class="marquee">
<div class="marquee-content">
<?php if (have_rows('partner_slider')) : ?>
<?php while (have_rows('partner_slider')) : the_row();
$logo = get_sub_field('logo_image'); ?>
<div class="logo-item">
<img src="<?php echo esc_url($logo); ?>" alt="Logo">
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>—
### ✅ CSS (controls the 4-item display and infinite marquee loop):
.marquee {
overflow: hidden;
position: relative;
width: 100%;
max-width: 100%;
}
.marquee-content {
display: flex;
width: max-content;
animation: scroll 20s linear infinite;
}
.logo-item {
flex: 0 0 auto;
width: 25%; /* 4 logos at a time = 100 / 4 = 25% */
text-align: center;
padding: 10px;
}
.logo-item img {
max-width: 100%;
height: auto;
display: inline-block;
}
/* Scroll animation */
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}—
### ✅ PHP: Duplicate the content for infinite effect
To make it loop seamlessly, **duplicate the logos** inside the PHP:
<div class="marquee">
<div class="marquee-content">
<?php for ($i = 0; $i < 2; $i++) : // Duplicate content twice ?>
<?php if (have_rows('partner_slider')) : ?>
<?php while (have_rows('partner_slider')) : the_row();
$logo = get_sub_field('logo_image'); ?>
<div class="logo-item">
<img src="<?php echo esc_url($logo); ?>" alt="Logo">
</div>
<?php endwhile; ?>
<?php rewind_rows(); // Reset for the next loop ?>
<?php endif; ?>
<?php endfor; ?>
</div>
</div>—
### Notes:
– The duplicated items ensure the animation is seamless.
– Adjust `animation-duration` (`20s`) to control speed.
– `width: 25%` ensures only 4 logos are visible at once (4 × 25% = 100%).
Would you like a JS-based version with pause on hover or responsive control too?