Incorrect slides amount and slides overlay Swiper JS - javascript

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

Related

Skip 3 images in slider as the example

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

Swiper.js not scrolling to final element

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

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>

How to disable drag in swiper slider

I am using swiper slider version 3.3.1.
I did apply this code, but not working
var swiper = new Swiper('.swiper', {
speed: 400,
autoHeight: false,
loop: true,
autoplay: 2500,
autoplayStopOnLast: false,
pagination: '.swiper-pagination',
paginationType: "bullets",
simulateTouch:false,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
effect: 'fade',
slidesPerView: 1,
scrollbar: {
container: '.swiper-scrollbar',
draggable: false,
}
});

I think it should be
allowTouchMove: false

To add onto Veronica's answer, you can set allowTouchMove: false as a parameter for the Swiper.
Example in React:
<Swiper
allowTouchMove={false} // disable touch / drag swiping
{...swiperProps}
>
{...slides}
</Swiper>
You can read more in the Swiper Documentation

how to include smooth transition to the sliding image carousel using the java-script?

I have made an automatic sliding image carousel in my website with the the HTML, CSS & Java-Script but the transition from one image to another is not good. Please guide me what to add in the Java-Script area to make the transition smooth?
I have tried the below java-script but I also want to add the smooth transition between the images.
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 30,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>

Add a by default fade effect:
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 30,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
effect: fade,
fadeEffect: {
crossFade: true }
});
More effects and animations for your carousel are provided here.

Categories

Resources