Release on Edges Scroll is not smooth

Viewed 2090

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!

0 Answers
Related