Make thumbs scroll one at a time in SwiperJS - javascript

Trying to make a simple carousel with an associated thumbs carousel under it:
// Thumbs
const galleryThumbs = new Swiper(thumbsElement, {
spaceBetween: 10,
slidesPerView: 4,
scrollbar: true,
breakpoints: {
768: {
slidesPerView: 8,
},
},
});
// Slides
const galleryTop = new Swiper(top, {
spaceBetween: 10,
effect: "fade",
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
multipleActiveThumbs: false,
thumbs: {
swiper: galleryThumbs,
},
});
This is working as described, but I have a problem:
When one scrolls to the next image using the navigation arrows, and the corresponding thumbnail is out of sight, the thumbnails scroll in group(by the amount described in the slidesPerView setting). I'm looking for a way for it to scroll just by one, as it does when scrolling with the back arrow.

Related

How to create a custom progress bar with numbers in Swiper

I have a progressbar in my Swiper slider. I need to make it so that the maximum number of slides is displayed on the right, and "01" on the left. When scrolling, they should not change, just static numbers for the minimum and maximum slides. How can i do this?
const swiper = new Swiper("mySlider", {
centeredSlides: true,
allowTouchMove: true,
navigation: {
nextEl: ".my-arrow__next",
prevEl: ".my-arrow__prev",
},
pagination: {
el: "my-pagination",
type: "progressbar",
},
});

How to prevent Swiper.JS from transitioning middle slide between two slides?

I am using Swiper.js when I navigate from slide 1 to slide 5; then all the slides between slide 1 and slide 5 are rapidly slid through. (CODEPEN HERE)
Vue.use(VueAwesomeSwiper);
new Vue({
el: "#app",
data: {
swiperOptions: {
loop: true,
slidesPerView: 1,
spaceBetween: 20,
autoplay: {
delay: 5000
},
speed: 500,
pagination: {
el: ".swiper-pagination",
clickable: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
}
}
});
How do I "skip" the slides between slides 1 and 5, so I get a smooth slide from slide 1 to slide 5 without transitioning middle slides in between?
If this isn't possible, what other library do you recommend that has this feature?

SwiperJS - I don't want that when I click on a button inside a slider, it brings that slider to the first position

When I click on a button that I have inside my slider, instead of executing what the button should do, what it does is take that slider to position 1 of the carousel. what I want is that this does not happen since it does not allow the action of the button to be executed, which is to open an overlay. I leave a video so that it is better understood.
I checked the documentation and I couldn't solve it.
This is my code:
let swiperTrending = new Swiper(".swiper-container-trending", {
slidesPerGroup: 1,
autoplay: {
delay: 3000,
},
speed: 1000,
grabCursor: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
100: {
slidesPerView: 1,
spaceBetween: 10,
},
768: {
slidesPerView: 2,
spaceBetween: 10,
},
1024: {
slidesPerView: 3,
spaceBetween: 60,
},
},
});
https://sendvid.com/rkza0bku

My Swiper.js doesn't stop on hover (only after adding speed parameter)

So I want to do this swiper.js carousel which slides linear from right to the left and after mouse hover it would stop. I used this function which works pretty fine:
$(".swiper-container3").hover(function() {
(this).swiper.autoplay.stop();
}, function() {
(this).swiper.autoplay.start();
});
If speed parameter is not defined in my swiper initialization function, then it stops after a hover (but only if the nearest slider will be on center of carousel).
How to force swiper.js to stop with the function above but not to wait for one of the sliders to be on center?
Rest of the code
const enableSwiper3 = function(){
mySwiper3 = new Swiper ('#swiper-container3', {
loop: true,
slidesPerView: "auto",
spaceBetween: 10,
centeredSlides: true,
a11y: true,
keyboardControl: true,
grabCursor: true,
freeMode: false,
pagination: {
el: '#swiper-pagination3',
},
paginationClickable: true,
breakpoints: {
400: {
slidesPerView: 'auto',
spaceBetween: 20,
loop: true
},
767: {
autoplay: {
delay: 5000,
disableOnInteraction: true,
pauseOnMouseEnter: true,
},
speed: 10000,
}
}
});
mySwiper3.autoplay.start();
}
I also want to lower its speed so whole slider goes linear very slow and just after hovering it it stops. Example on the site below: https://www.intercom.com/ (people are talking section).

how to make Scroll like this with text fill in scroll

( http://clapat.ro/themes/hervin-wordpress/ )
i have done scroll effect with more error like this
var swiper = new Swiper(".swiper-container", {
pagination: ".swiper-pagination",
direction: "vertical",
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 0,
effect: "coverflow",
coverflowEffect: {
rotate: 5,
slideShadows: true,
modifier: 0,
stretch: 10,
depth: 300,
},
mousewheel: {
releaseOnEdges: true,
sensitivity: 50,
},
observer: true,
observeParents: true,
parallax: true,
speed: 600,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
and result same here
https://swiperjs.com/demos/270-mousewheel-control.html
Now I need any idea to fill in the text in the scroll like link above
you probably don't need Swiper for this
this effect can be achieved by some parallax techniques
you may need some 3rd party library to make your life easier
if you are using react you may use FramerMotion or spring
if you are using vanilla javascript you can find dozens of parallax scrolling libraries you may check this one

Categories