Hello everyone, I'm trying, without much success, to reproduce this slider to skip 3 images at once, what I achieved here was to jump from 1 to 1 using SWIPER, a JS script to skip the slider, but I imagine there is an easier way to do it using the
Example of the code I'm using:
var swiper = new Swiper(".slide-content", {
slidesPerView: 3,
spaceBetween: 25,
loop: true,
centerSlide: "true",
fade: "true",
grabCursor: "true",
pagination: {
el: ".swiper-pagination",
clickable: true,
dynamicBullets: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
0: {
slidesPerView: 1,
},
520: {
slidesPerView: 2,
},
950: {
slidesPerView: 3,
},
},
});
You need to add slidesPerGroup attribute
slidesPerGroup="3"
codesandbox example
Add the
slidesPerGroup: 3
to your existing config and it should work
see an example here
add slidesPerGroup : 3
read the docs here SwiperJs SlidesPerGroup
Related
As it seems since version 9 of swiper.js you cannot loop through your slides if you do not have more than double the slides available than slidesPerView. So for example if I want to build a slider that shows 5 products at once, and want to loop through a list of 7 products I cannot do that. If I show just 1 or 2 products at once everything is fine.
This behavior seems to come from the new loop logic they implemented. Here is my configuration for the swiper:
const params =
modules: [Autoplay, Pagination, Navigation],
autoplay: {
enabled: false,
speed: 3000,
},
speed: 400,
navigation: true,
pagination:{
enabled: true,
dynamicBullets: true,
dynamicMainBullets: 4
},
loop: true,
spaceBetween: 30,
centeredSlides: false,
breakpoints: {
0: {
slidesPerView: 1,
},
[BREAKPOINT_WIDTH.extraSmall*16]: {
slidesPerView: 3
},
[BREAKPOINT_WIDTH.medium*16]: {
slidesPerView: 3
},
[BREAKPOINT_WIDTH.large*16]: {
slidesPerView: 5
}
},
};
Is there an option I overlooked? Or has somebody a solution for the problem?
I tried to add swiper.js to tab elements in Oxygen Builder but it is not scrolling to the end unless I set swiper.js to 'centeredslides:true' or 'loop:true' but loop breaks Oxygen Builder tabs.
Any ideas on how to fix this? Can provide video of error if needed..
jQuery(document).ready(function() {
const swiper = new Swiper('.swiper', {
// Optional parameters
freeMode: true,
slidesPerView: 8,
centeredSlides: true,
spaceBetween: 0,
direction: 'horizontal',
loop: false,
freeMode: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
scrollbar: {
el: ".swiper-scrollbar",
hide: false,
},
});
});
I am working on a project and using swiperJS to create a slider but the breakpoints are not working, your help would be very much appreciated. Everything else is working with the exception of the breakpoints......
Here is the code...
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".slider--container", {
slidesPerView: 3,
spaceBetween: 30,
loop: true,
centerSlide: 'true',
fade: 'true',
grabCursor: 'true',
pagination: {
el: ".swiper-pagination",
clickable: true,
dynamicBullets: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
0:{
slidesPerView: 1,
},
520:{
slidesPerView: 2,
},
950:{
slidesPerView: 3,
},
},
});
</script>
guys!
I'm using Swiper slide JS, bu at first I created Joomla module with this script. And my slider works incorrect.
At first, I can't understand why if I display slidePerView: 4 - on my website displaying each slide with width 100%. It's strange.
All slides overlay each other. You can to see this on my screenshot:
Screenshot
This is link to my website: https://hmc.bold.com.sa/services/dental-services
It's more simple to look on website.
This is JS code:
<script> let swiper146 = new Swiper(".swiper-doctors", {
navigation: {
nextEl: '.swiper-button-next146',
prevEl: '.swiper-button-prev146',
},
spaceBetween: 20,
slidesPerView: 4,
effect: "fade",
hashNavigation: false,
history: false,
lazy: false,
autoHeight: false,
zoom: false,
rewind: false,
grabCursor: false,
loop: true,
loopPreventsSlide: true,
breakpoints: {1920: { slidesPerView: 4, spaceBetween: 20},} });</script>
Help me please to fix this issue. Thanks
I have swiperjs working except I am trying to access its methods to apply a slide centering hack. To do that I need to access its object but for some reason it tells me undefined even though the swiper works.
Swiper set is:
var mySwiper = new Swiper('#design', {
slidesPerView: 3,
spaceBetween: 30,
loop: false,
observer: true,
observeParents: true,
observeSlideChildren: true,
preventClicksPropagation: false,
centeredSlides: true,
centeredSlidesBounds: true,
centerInsufficientSlides: true,
navigation: {
nextEl: '.swiper-design #swiper-button-feature-next',
prevEl: '.swiper-design #swiper-button-feature-prev',
},
breakpoints: {
1024: {
slidesPerView: 2,
spaceBetween: 30,
},
768: {
slidesPerView: 2,
spaceBetween: 30,
},
640: {
slidesPerView: 1,
spaceBetween: 20,
},
320: {
slidesPerView: 1,
spaceBetween: 10,
}
},
on: {
init: function () {
console.log('swiper initialized');
console.log(mySwiper);
},
}
});
I am wanting to implement a hack along these lines, https://github.com/nolimits4web/swiper/issues/2081#issuecomment-296781831 so I can center swipers that have only one slide.
Any thoughts as to what is up here? Thank you.
The init function within the swiper doesn't know that variable exists.
So change
init: function () {
to
init: function (mySwiper) {