Creating a responsive, touch-friendly slider connected to Webflow CMS sounds simple—until you actually try it. Webflow’s Collection List structure won’t let you insert the required Swiper elements (swiper-wrapper, swiper-slide) directly, which causes most implementations to fail.
After testing many approaches, this is the simplest fully working method:
Let Webflow generate its CMS structure, then dynamically rebuild Swiper’s required HTML using JavaScript.
This article walks you through:
-
The required HTML structure
-
How Webflow actually outputs CMS lists
-
Why typical Swiper setups fail
-
The final 100% working solution
-
Full code (copy/paste ready)
-
Styling and responsive settings
The Problem: Webflow CMS Locks the Structure
Webflow CMS outputs the following structure every time:
Collection List Wrapper
Collection List
Collection Item
Your Content
You cannot insert:
-
<div class="swiper-wrapper"> -
<div class="swiper-slide">
inside the CMS list.
This is what prevents Swiper from initializing.
The Goal: A Real, Swiper-Compatible Structure
Swiper requires this:
.swiper-container
.swiper-wrapper
.swiper-slide
.swiper-slide
.swiper-slide
But since Webflow won’t let you restructure the DOM inside a Collection List, we do it dynamically using JavaScript.
Final Working Webflow Structure (Designer)
You only need to build this in Webflow:
div.swiper-container
Collection List Wrapper
Collection List
Collection Item
Card (your content)
swiper-button-prev (text block)
swiper-button-next (text block)
swiper-pagination (text block)
No extra wrappers.
No swiper-slide classes.
No embeds required inside CMS.
Everything else is handled by the script.
Step 1 — Include Swiper CSS
Inside Project Settings → Custom Code → Inside <head>:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
Step 2 — Add the JS + Swiper Loader
Inside Project Settings → Before </body> tag:
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const container = document.querySelector('.swiper-container');
if (!container) return;
// 1. Create real swiper-wrapper
const wrapper = document.createElement('div');
wrapper.classList.add('swiper-wrapper');
// 2. Move each CMS item inside the new wrapper
const cmsItems = container.querySelectorAll('.w-dyn-item');
cmsItems.forEach(item => {
item.classList.add('swiper-slide');
wrapper.appendChild(item);
});
// 3. Insert wrapper before the navigation
container.insertBefore(wrapper, container.querySelector('.swiper-button-prev'));
// 4. Initialize Swiper
const swiper = new Swiper('.swiper-container', {
slidesPerView: 1.1,
spaceBetween: 20,
loop: false,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
768: { slidesPerView: 2.2 },
1024: { slidesPerView: 3 },
},
});
});
</script>
Step 3 — Optional CSS (Recommended)
Inside Page Settings → Inside <head>:
<style>
.swiper-container {
width: 100%;
position: relative;
overflow: hidden;
}
.swiper-wrapper {
display: flex;
}
.swiper-slide {
width: auto;
}
</style>
This ensures the cards don’t collapse and Swiper handles width correctly.
Why This Method Works
Webflow CMS generates .w-dyn-item elements you cannot modify manually
We dynamically convert each .w-dyn-item into a true .swiper-slide
We generate .swiper-wrapper dynamically
We insert it properly into Webflow’s DOM
Swiper initializes successfully, every time
Works with any amount of CMS items
This lets you build real, modern sliders directly from CMS collections—something Webflow doesn’t support out of the box.
Useful Links
-
Swiper.js
https://swiperjs.com/ -
Swiper Docs (Navigation, Pagination, Breakpoints)
https://swiperjs.com/swiper-api -
Webflow CMS
https://webflow.com/cms -
Webflow University
https://university.webflow.com/
Final Result
You now have:
-
A fully responsive CMS-powered slider
-
Swipe/drag interactions
-
Navigation buttons
-
Pagination dots
-
Breakpoints for mobile/tablet/desktop
-
Zero embeds inside CMS
-
Compatible with the new 2025 Webflow Designer
This method has been tested and works reliably across multiple projects.
If you’d like, I can also provide:
Autoplay version
Infinite loop version (with CMS cloning logic)
Coverflow effect
Custom arrow icons
Multiple sliders on one page support