Hey I'm using swipper js to build a vertical slider!
The Intended Solution:
-> When building the slider , i want to release the mouse scroll as soon it reaches the first or last slide.
The Problems:
-> Sometimes it makes the page scroll and the slider at the same time (happened only a few times) when i lowered the swiper version to 4.5.1
-> Main problem happened when i was working with version 5.3.1, when reaching the first or last slide, it scrolled too suddently, and the transition wasn't smooth which caused some usability problems...
<script src="https://unpkg.com/swiper#5.3.1/js/swiper.min.js"></script>
Code:
Version 4.5.1
let productSwiper = new Swiper(".swiper-container--product", {
direction: "vertical",
loop: false,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
grabCursor: true,
speed: 1000,
paginationClickable: true,
parallax: true,
autoplay: false,
effect: "slide",
centerMode: false,
mousewheel: true,
loopFillGroupWithBlank: false,
slidesPerView: 'auto',
touchReleaseOnEdges:true
});
productSwiper.swiper;
Version 5.3.1
let productSwiper = new Swiper(".swiper-container--product", {
direction: "vertical",
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
grabCursor: true,
speed: 1000,
parallax: true,
autoplay: false,
effect: "slide",
centerMode: false,
mousewheelSensitivity: 1,
mousewheel: {
releaseOnEdges: true,
},
loopFillGroupWithBlank: false,
slidesPerView: 'auto',
Note: I removed the release on edges atribute on the 4.5.1 version, because currently it was causing that bug.
Sorry for the long post , thanks in advance!
Related
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).
( 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
I am using Swiperjs as I am looking for an infinite looping swiper that never stops in the middle however I have tried many settings and cant seem to get it to work where it is the same speed and no jumping and no slowing down as it gets to the center.
Below is the best I have got it where it does not jump but it slows down as it gets into the center.
const params = {
loop: true,
speed: 5000,
freeMode: true,
freeModeFluid:true,
resistance: false,
simulateTouch: false,
waitForTransition: false,
centeredSlides: false,
freeModeMomentum: false,
freeModeMinimumVelocity: 0,
freeModeMomentumBounceRatio: 0,
freeModeMomentumBounce: false,
normalizeSlideIndex: false,
autoplay: {
delay: 1,
disableOnInteraction: true,
}
}
Swiper 3.4.1 on Windows
I did a slider with arrow navigation, infinite loop and fade effect:
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
slidesPerView: 1,
simulateTouch: false,
speed: 1600,
autoplay: 2500,
autoplayDisableOnInteraction: false,
loop: true,
effect: 'fade',
fade: {
crossFade: true
}
});
Expected Behavior
I need to stop animation when click on arrows(next and prev buttons)
Actual Behavior
I can't click next or prev buttons while animation is not finished
How can I skip the animation on click?(I haven't found this in the documentation)
ps: it works when I remove loop, but I need it
Currently I am experiencing a snap back from the last image to the first when OwlCarousel reaches the last image. I would prefare it to continuously repeat in the same direction.
Is there a setting for this?
Currently the code is:
g.owlCarousel({
navigation: false,
slideSpeed: 500,
items: 1,
pagination: false,
loop: true,
mouseDrag: false,
touchDrag: false,
autoPlay: true,
singleItem: true
});