Question: How to add laptop trackpad (horizontal scroll) support to this implementation?

[web-dev-0]

Body

Hi everyone,

I am currently using Slick Slider with a custom script to handle dynamic heights on desktop/tablet. It works well with click-and-drag navigation.

However, I want to add support for laptop trackpads (and horizontal mouse wheels) so that users can swipe left/right on their trackpad to navigate the slides, rather than having to click and drag.

Does anyone know how to bind the wheel or scroll event to trigger slickNext and slickPrev based on horizontal movement (deltaX), without breaking my existing dynamic height logic?

Here is my current code:

// AI Success stories sldier

jQuery(document).ready(function($) {

  if ($('.ai-slider-section').length) {

    function setDynamicHeight() {
      // Only run on desktop and tablet
      if ($(window).width() < 768) {
        // Remove dynamic height on mobile
        $('#ai-slider-dynamic-height').remove();
        return;
      }

      let maxH = 0;

      // Find tallest slide
      $('.ai-slider-section .slick-slide').each(function() {
        const h = $(this).outerHeight(true);
        if (h > maxH) maxH = h;
      });

      // Remove old rule if exists
      $('#ai-slider-dynamic-height').remove();

      // Add style tag with !important
      const css = `
        .ai-slider-section .slick-slide {
          height: ${maxH}px !important;
        }
      `;

      $('head').append(`<style id="ai-slider-dynamic-height">${css}</style>`);
    }

    // Run after slick initializes
    $('.ai-slider-section').on('init', function(event, slick) {
      setTimeout(setDynamicHeight, 100);
    });

    // Re-run after slide change
    $('.ai-slider-section').on('afterChange', function(event, slick, currentSlide){
      setDynamicHeight();
    });

    // Re-run on window resize
    $(window).on('resize', function(){
      setDynamicHeight();
    });

    // Initialize slick
    $('.ai-slider-section').slick({
      centerMode: true,
      centerPadding: '120px',
      slidesToShow: 2,
      arrows: true,
      dots: true,
      adaptiveHeight: true,
      responsive: [
        {
          breakpoint: 1050,
          settings: {
            centerMode: false,
            centerPadding: '0px',
            slidesToShow: 1.5
          }
        },
        {
          breakpoint: 768,
          settings: {
            centerPadding: '0px',
            slidesToShow: 1
          }
        }
      ]
    });

    // Trigger once on page load in case the slider is already initialized
    setDynamicHeight();

  }

});

Guidelines

• I have read and understood this category's guidelines before making this post.

[IvanPavlovic-web]

Hey @web-dev-0, you don't have to touch the dynamic height logic at all. You can just listen for the wheel event and react to horizontal scroll.

Here is an example that you can implement

function handleWheel(e) {
  const dx = e.originalEvent.deltaX || 0;
  const dy = e.originalEvent.deltaY || 0;

  if (Math.abs(dx) > Math.abs(dy)) {
    e.preventDefault();
    dx > 30
      ? $(this).slick('slickNext')
      : dx < -30 && $(this).slick('slickPrev');
  }
}

$('.ai-slider-section').on('init', function () {
  $(this).on('wheel', handleWheel);
});

in practice, this should enable the trackpad swipe as well as the horizontal mouse wheel navigation without breaking anything else. Let me know if this helped, mate!

[web-dev-0]

Thanks so much mate! this works :)

I was trying very hard to make it work, once again Thank You!

[IvanPavlovic-web]

I am glad that the fix helped you!

Happy New Year and if anything else is needed, please dont hesitate to @ me🫡