Basic styling changes + Tips/Tricks:
A. Change bullets color:
!-- swiper 6 CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper-bundle.min.css">
<!-- swiper styles -->
<style>
span.swiper-pagination-bullet {
background: purple;
}
</style>
**
**
B. Change arrows color and size:
<style>
/*change color*/
.swiper-button-prev, .swiper-button-next{
color: purple;
}
/* change size */
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 26px;
}
</style>
C. Hide arrows on mobile
In my opinion no need for arrows on mobile.
<style>
@media only screen and (max-width: 767px) {
.swiper-button-next, .swiper-button-prev {
display: none;
}
}
</style>
D. Create auto layout “cutting edge” slider
Change slidesPerView to auto
slidesPerView: 'auto',
Only works by Custom CSS - add this for example:
<style>
.swiper-slide{
width: 60%;
}
</style>
Or use slidesPerView: 1.2, (Some decimal number)
E. Add styles for the active slide:
.swiper-slide-active added by js.
<style>
.swiper-slide.swiper-slide-active .card{
background: red;
color: white;
}
</style>
By webflow:
- Add combo class
- Remove this class (swiper will add this class “on fly”):
If you want to edit the active class follow again step 1 (Add combo → change style x - remove and publish).
F. Responsive images:
Put inside your slider responsive images (Always fit slide width)
G. Load more than one slider on the same page:
Same setting (useful if the swiper is part of collection item inside collection list"nested idea").
##USE DIFF CODE structure##
$(".swiper-container").each(function(index, element){
<!-- swiper 6 JS -->
<script src="https://unpkg.com/swiper/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>
let swiperCMSglobalSetting = {
// Optional parameters
slidesPerView: 1,
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',
},
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,
},
*/
}
$(".swiper-container").each(function(index, element){
var $this = $(this);
var swiper = new Swiper(this,
// your settings ...
swiperCMSglobalSetting
);
});
</script>
Difference setting - on webflow add second class to swiper-container (“combo”) - and Initialize swiper (Step4 above) more than one time (Each time use the correct combo-class).
new Swiper ('.slider_1',/*....rest of the code
new Swiper ('.slider_2',/*....rest of the code
new Swiper ('.slider_3',/*....rest of the code
<script>
var mySwiper = new Swiper ('.posts', {
// Optional parameters
slidesPerView: 5,
autoplay: {
delay: 3000,
}
})
var mySwiper = new Swiper ('.portfolio', {
// Optional parameters
slidesPerView: 2,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
autoplay: {
delay: 3000,
}
})
</script>
H. Create custom next/prev buttons (Outside of the slider)
For this button:
Change this setting:
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
To
navigation: {
nextEl: '.custom_next',
prevEl: '.swiper-button-prev',
},
Not working? Check if webflow selector (chrome Inspect element) match nextEl class (.some-value) ** For teams its better to use #id selector (Because its easier to rename classes over time).