Logo Marquee Repeat
User
Assistant
To **repeat the entire set of logos** infinitely (so they scroll continuously in a marquee effect), you'll want to **duplicate the content of the `.marquee-content`** inside the same container. This is a common technique to create a smooth, seamless marquee animation.
### ✅ Here's the updated code:
<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
// Repeat logos again for smooth scroll
reset_rows();
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>### 🧠 Key Points:
– `reset_rows();` is used to go back to the start of the `have_rows` loop and repeat it.
– This will make the same set of logos appear twice in `.marquee-content`, creating the illusion of an infinite scroll when animated.
### 🎯 Bonus: Example CSS for marquee effect
.marquee {
overflow: hidden;
white-space: nowrap;
}
.marquee-content {
display: flex;
animation: marquee 20s linear infinite;
}
.logo-item {
flex: 0 0 auto;
padding: 0 20px;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}Let me know if you'd like the animation to pause on hover, or to go vertically instead of horizontally.