Smooth mousewheel scroll with horizontal freemode

[Zmove]

Hello,

I'm trying to create a global horizontal scroll for a website, and I think swiper could be a good candidate for that.

I could easily setup my slider, but unfortunately, the scroll is not smooth when I use my mousewheel. It "jump", 100px by 100px, completely ruining the desired effect.

Do you see a solution for this, or swiper is just not the good candidate to create that kind of navigation ? Do you have some other plugins to suggest me that would fit my need ?

Thank you

[steve231293]

Hello, I need also this feature. Have you got any solutions, yet? How can i make mousewheel smooth like when dragging with freemode?

[adamcoulombe]

yeah I agree. I suspect there is some conflict with the way the lib handles slide transitions. It appears the transitions are intentionally squashed.

for example, you can add your own css rule to force a transition, but its a little janky.

.swiper-wrapper{
transition-duration: 1.2s!important;
}

Looking back thru some previous issues, @nolimits4web mentioned at one point that Swiper does not make the scrolling smooth:

Sorry, Swiper doesn't make scrolling "smoother", it is just scroll content on the value received by scroll event. So in your case is more system+browser issue. You can try to tweak this behavior using mousewheelSensitivity parameter

Originally posted by @nolimits4web in https://github.com/nolimits4web/swiper/issues/1434#issuecomment-140811909

I started down to road of adding my own scroll behavior with a separate animation library (GSAP), though, I eventually moved on because I didn't feel like messing around with it a whole bunch. It looked something like this, I'll fully admit, this is pretty half-baked but im sure you could get something like this workable if you were really determined to make it work.

window.addEventListener('mousewheel',handleMouseWheel);
function handleMouseWheel(e){
   var translate = { y: swiper.translate }
   TweenMax.to(translate,1.2, { y: (e.deltaY) * -1, onUpdate:function(){
      swiper.setTranslate(translate.y)
   } })
}

[Kulgar]

I managed to do something quite nice using that code:

  function onMouseWheel(e) {
    console.log(e);
    clearTimeout($.data(this, 'timer'));

    $(".swiper-wrapper").addClass('mousewheel');

    $.data(this, 'timer', setTimeout( function () {
      $(".swiper-wrapper").removeClass('mousewheel')

    }, 250));
  });
  window.addEventListener( 'mousewheel', onMouseWheel, false )
  window.addEventListener( 'DOMMouseScroll', onMouseWheel, false )

Then in your CSS:

.swiper-wrapper.mousewheel {
  transition-duration: 1.2s !important;
}

You can play with mousewheel sensitivity & transition-duration to change the pace and feel of the smooth effect.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed due to inactivity. If this issue is still actual, please, create the new one.

[dluigirafael]

Still an issue

[notrealdev]

same here

[nionios]

Adding momentum scrolling libraries to a website made with swiper.js seems to mess with swiper.progress too much. You have to set sensitivity to 0, which results in progress staying 0 also. This makes it impossible (afaik) to rely on another plugin for horizontal momentum scrolling on free mode. Has anyone figured out anything new? (Fully aware that momentum/smooth scrolling is considered bad practice of course)

Edit: Managed to get the desired effect of smooth, momentum scrolling with the info in this thread. Changed it up a bit for syntax errors, made it a bit better:

CSS Rules:

.swiper-container {
  height: 100vh;
  overflow: hidden;
}

.swiper-container .swiper-wrapper {
  height: 100vh;
}

.swiper-container .swiper-wrapper {
  transition-duration: 0.8s !important;
  /*Ease-out for scrolling, big difference when changed*/
  transition-timing-function: ease-out;
}

Javascript (Swiper.js config, only relevant stuff):

function createSwiper() {
// High sensitivity setting to equalize the transition duration "delay" the user feels
    return new Swiper(".swiper-container", {
        freeMode:             true,
        mousewheel:           {
            releaseOnEdges: true,
            sensitivity:    6,
        },
    });
}

I ended up not keeping the .mousewheel class addition through JS, no need for it in my usecase.