Flexslider - Disable scrolling on last slide

218 Views Asked by At

I'm currently using the Flexslider module for Drupal 8. I want to create a vertical carousel that you can control with the mouse wheel. Scrolling exists, but it loops the slides endlessly. I want the scrolling to stop at the last slide so that users can continue scrolling down the page.

I've attempted to use the solutions in this post, but they don't seem to work for me. The unmousewheel(); function called in the solution does not exist in the Flexslider JS. I also tried to the second solution, and it breaks scrolling all together.

Ideally, I'd like the amend the Flexslider JS using an outside function so that I'm not altering the Flexslider code directly. The Flexslider JS is installed automatically in my dev and prod servers, and it is not tracked in my git repo.

I've had some success using this custom code. I'm able to get a console.log statement to fire every time I hit the last slide in the array. I'm just not sure how to use it to get what I want.

(function ($, Drupal) {
    console.log('function works');
    Drupal.behaviors.my_custom_flexslider_behaviour = {
        attach: function (context, settings) { 
            $('.flexslider').bind('end', function(e, slider) {
                console.log('last slide');
            });
        }
    };
  })(jQuery, Drupal, this, this.document);

From what I can tell, this is what controls the mouse wheel in the Flexslider JS:

// MOUSEWHEEL:
        if (slider.vars.mousewheel) {
          slider.bind('mousewheel', function(event, delta, deltaX, deltaY) {
            event.preventDefault();
            var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');
            slider.flexAnimate(target, slider.vars.pauseOnAction);
          });
        }

Again, I'm not sure how to append a solution to that. My understanding of JQuery/JS is limited.

0

There are 0 best solutions below