Autoplay
Image
Looping
Infinite
Script
Javascript
Interval
Search
K
Documentation
Webflow
Code
Setup: External Scripts
External Scripts in Webflow
Make sure to always put the External Scripts before the Javascript step of the resource.
In this video you learn where to put these in your Webflow project? Or how to include a paid GSAP Club plugin in your project?
HTML
Copy
Step 1: Copy structure to Webflow
Copy structure to Webflow
In the video below we described how you can copy + paste the structure of this resource to your Webflow project.
Copy to Webflow
Webflow structure is not required for this resource.
Step 1: Add HTML
HTML
Copy
<div class="image-cycle-collection">
<div class="image-cycle-collection__before"></div>
<div class="image-cycle-collection__list" data-image-cycle="2.5">
<div class="image-cycle-collection__img" data-image-cycle-item="" class="image-cycle-collection__item">
<img src="https://cdn.prod.website-files.com/679e2a340ce9c67cecbca3ad/679e2c81170b6a90046718a2_image-1.webp" loading="lazy" alt="">
</div>
<div class="image-cycle-collection__img" data-image-cycle-item="" class="image-cycle-collection__item">
<img src="https://cdn.prod.website-files.com/679e2a340ce9c67cecbca3ad/679e2c80ab2f91466875df0b_image-2.webp" loading="lazy" alt="">
</div>
<div class="image-cycle-collection__img" data-image-cycle-item="" class="image-cycle-collection__item">
<img src="https://cdn.prod.website-files.com/679e2a340ce9c67cecbca3ad/679e2c80f4b142f1a685a2ee_image-3.webp" loading="lazy" alt="">
</div>
<div class="image-cycle-collection__img" data-image-cycle-item="" class="image-cycle-collection__item">
<img src="https://cdn.prod.website-files.com/679e2a340ce9c67cecbca3ad/679e2c801b8a79e8393b622b_image-4.webp" loading="lazy" alt="">
</div>
<div class="image-cycle-collection__img" data-image-cycle-item="" class="image-cycle-collection__item">
<img src="https://cdn.prod.website-files.com/679e2a340ce9c67cecbca3ad/679e2c803f7f3ff9ad22d21b_image-5.webp" loading="lazy" alt="">
</div>
</div>
</div>HTML structure is not required for this resource.
Step 2: Add CSS
CSS
Copy
.image-cycle-collection {
width: min(95vw, 60em);
position: relative;
}
.image-cycle-collection__before {
padding-top: 66.666%;
}
.image-cycle-collection__list {
z-index: 0;
border-radius: 2em;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.image-cycle-collection__item {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
[data-image-cycle-item="active"] {
transition: opacity 0.4s ease 0s, visibility 0s ease 0s;
opacity: 1;
visibility: visible;
z-index: 3;
}
[data-image-cycle-item="previous"] {
transition: opacity 0.4s ease 0.4s, visibility 0s ease 0.4s;
opacity: 0;
visibility: visible;
z-index: 2;
}
[data-image-cycle-item="not-active"] {
opacity: 0;
visibility: hidden;
z-index: 1;
}
.image-cycle-collection__img {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
}
@media screen and (max-width: 767px) {
.image-cycle-collection__list {
border-radius: 1em;
}
}Step 2: Add custom Javascript
Custom Javascript in Webflow
In this video, Ilja gives you some guidance about using JavaScript in Webflow:
Step 2: Add Javascript
Step 3: Add Javascript
Javascript
Copy
function initImageCycle() {
document.querySelectorAll("[data-image-cycle]").forEach(cycleElement => {
const items = cycleElement.querySelectorAll("[data-image-cycle-item]");
if (items.length < 2) return;
let currentIndex = 0;
let intervalId;
// Get optional custom duration (in seconds), fallback to 2000ms
const attrValue = cycleElement.getAttribute("data-image-cycle");
const duration = attrValue && !isNaN(attrValue) ? parseFloat(attrValue) * 1000 : 2000;
const isTwoItems = items.length === 2;
// Initial state
items.forEach((item, i) => {
item.setAttribute("data-image-cycle-item", i === 0 ? "active" : "not-active");
});
function cycleImages() {
const prevIndex = currentIndex;
currentIndex = (currentIndex + 1) % items.length;
items[prevIndex].setAttribute("data-image-cycle-item", "previous");
if (!isTwoItems) {
setTimeout(() => {
items[prevIndex].setAttribute("data-image-cycle-item", "not-active");
}, duration);
}
items[currentIndex].setAttribute("data-image-cycle-item", "active");
}
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting && !intervalId) {
intervalId = setInterval(cycleImages, duration);
} else {
clearInterval(intervalId);
intervalId = null;
}
}, { threshold: 0 });
observer.observe(cycleElement);
});
}
// Initialize Image Cycle
document.addEventListener('DOMContentLoaded', function() {
initImageCycle();
});Step 3: Add custom CSS
Step 2: Add custom CSS
Custom CSS in Webflow
Curious about where to put custom CSS in Webflow? Ilja explains it in the below video:
CSS
Copy
[data-image-cycle-item="active"] {
transition: opacity 0.4s ease 0s, visibility 0s ease 0s;
opacity: 1;
visibility: visible;
z-index: 3;
}
[data-image-cycle-item="previous"] {
transition: opacity 0.4s ease 0.4s, visibility 0s ease 0.4s;
opacity: 0;
visibility: visible;
z-index: 2;
}
[data-image-cycle-item="not-active"] {
opacity: 0;
visibility: hidden;
z-index: 1;
}Impementation
Image Cycle Group
The script will search inside the [data-image-cycle] group for elements with the [data-image-cycle-item] attribute. This acts as the container for the cycle group. You can optionally pass a number value (in seconds) to control the cycle speed:
<!-- Defaults to 2000ms -->
<div data-image-cycle>...</div>
<!-- Custom interval: 3 seconds -->
<div data-image-cycle="3">...</div>Image Cycle Item
The children will get different states based on their order in the group. These can be used to animate them. Example: [data-image-cycle-item="active"]
- active: The slide that is visible will get this attribute
- previous: The slide that is fading-out will get this attribute to have a solid fade effect.
- not-active: All other slides that are not visible.
Search
K
Resource Details
Last updated
June 16, 2025
Type
The Vault
Category
Gallery & Images
Need help?
Join Slack
Original source
Dennis SnellenbergCreator Credits
We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.