Update august 2021 - Swiper 7.0
change class names. This guide is for SWIPER 6
(change swiper-container
class name to swiper
)
Migration Guide to Swiper 7
Vote for this wishlist idea CMS Slider
:
https://wishlist.webflow.com/ideas/WEBFLOW-I-94
Demo: https://test-c0d8d3.webflow.io/swiper
Swiper - amazing mobile-friendly slider.
The only plugin supports: preventClicks
Parameter (Prevent accidental unwanted clicks on links during swiping) (Great for portfolio/articles/products slider when the entire card is clickable).
HOW TO: Less than 1 minute
** (Minimal JS knowledge is required).
Start point:
Basic collection list
After:
Step 1 - Include Swiper Files
1.1. CSS
Page setting (Gear icon) copy-paste inside <head>
tag
<!-- swiper CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.css">
1.2. Javascript
copy-paste before <body>
tag
<!-- swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.min.js"></script>
Step 2 - HTML Layout
- For
Collection List Wrapper
==> addswiper-container
Collection List
==>swiper-wrapper
Collection Item
==>swiper-slide
Step 3 - Add arrows and pagination HTML markup by code (append)
Why? (No way
to put extra div/embed-HTML inside collection list).
6 Lines code solution:
copy-paste
<!-- Swiper & Webflow CMS collection - Extra Step - add arrows and pagination html markup by code (Append) -->
<script>
var swiperNodes = "";
var pagination = '<div class=swiper-pagination></div>';
var next_prev_buttons = '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>';
var scrollbar = '<div class="swiper-scrollbar"></div>';
var swiperNodes = swiperNodes.concat(pagination, next_prev_buttons, scrollbar);
/* loop throw all swipers on the page */
$('.swiper-container').each(function( index ) {
$( this ).append(swiperNodes);
});
</script>
Very simple code idea (Can skip the explanation):
- First create string var for each element.
- Next concat method (Join strings).
- Last use jQuery append() Method and add
node
insideswiper-container
.
The append() method inserts specified content at the end of the selected elements.
- Full list of options (API): https://swiperjs.com/api/
- For regular CMS slider (Without CMS) it’s ok to add divs and classes manually.
Step 4 - swiper JS Initialize (arrows & Pagination)
Copy Paste code (Before body).
I set some useful parameters (Like breakpoint
= responsive slider).
<!-- swiper JS Initialize -->
<script>
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
spaceBetween: 30,
freeMode: false,
loop: true,
centeredSlides: false,
// Enable lazy loading
lazy: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true
},
keyboard: {
enabled: true,
},
breakpoints: {
0: { /* when window >=0px - webflow mobile landscape/portriat */
slidesPerView: 1,
spaceBetween: 20,
},
767: { /* when window >= 767px - webflow tablet */
slidesPerView: 2,
spaceBetween: 30,
},
988: { /* when window >= 988px - webflow desktop */
slidesPerView: 4,
spaceBetween: 40,
}
},
/* uncomment if you want autoplay slider
autoplay: {
delay: 3000,
},
*/
/* uncomment if you want scrollbar
scrollbar: {
el: '.swiper-scrollbar',
hide: true,
},
*/
})
</script>
** .swiper-container
is the class we added on step 2.
Step 5 - styling the card (Not mandatory)
Add card
extra div inside swiper-slide
(Like this we will not do any change to swiper-slide
core styles == safier).
Useful to add margin-bottom for the swiper-slide
(room for pagination - and thats it):
Full copy-paste code
copy-paste Inside head
<!-- swiper 6 CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.css">
copy-paste Before body
<!-- swiper 6 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.min.js"></script>
<!-- Swiper - Extra Step - add arrows and pagination html markup by code (Append) -->
<script>
var swiperNodes = "";
var pagination = '<div class=swiper-pagination></div>';
var next_prev_buttons = '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>';
var scrollbar = '<div class="swiper-scrollbar"></div>';
var swiperNodes = swiperNodes.concat(pagination, next_prev_buttons);
/* loop throw all swipers on the page */
$('.swiper-container').each(function( index ) {
$( this ).append(swiperNodes);
});
</script>
<!-- swiper JS Initialize -->
<script>
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
slidesPerView: 1,
spaceBetween: 30,
freeMode: false,
loop: true,
centeredSlides: false,
// Enable lazy loading
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true
},
keyboard: {
enabled: true,
},
breakpoints: {
0: { /* when window >=0px - webflow mobile landscape/portriat */
slidesPerView: 1,
spaceBetween: 10,
},
767: { /* when window >= 767px - webflow tablet */
slidesPerView: 2,
spaceBetween: 15,
},
988: { /* when window >= 988px - webflow desktop */
slidesPerView: 3,
spaceBetween: 20,
}
},
/* uncomment if you want autoplay slider
autoplay: {
delay: 3000,
},
*/
/* uncomment if you want scrollbar
scrollbar: {
el: '.swiper-scrollbar',
hide: true,
},
*/
})
</script>
6. Publish:
Extra Reading:
- Swiper get started: Getting Started With Swiper
- Full list of options (API): https://swiperjs.com/api/
- Demos: https://swiperjs.com/demos/
- Swiper Github: GitHub - nolimits4web/swiper: Most modern mobile touch slider with hardware accelerated transitions
Things go wrong?
- Style/Layout: Don’t add any extra “crazy” CSS properties to swiper core classes (
swiper-container
/swiper-wrapper
/swiper-slide
) => (Like displaygrid
forswiper-wrapper
-or- positionabsolute
for theswiper-slide
). - Webflow site tree - check again your class names.
- Check if you Copy-Paste the custom code (before body (javascript) + head (css)).
- Check for
red
console errors (Under your publish sitectr + shift + i
inspect).
Related:
owl carousel 2
-
** I know this swiper very well (API/Custom code) - if someone needs something (Write to me in private).