title: Slick Carousel Scroll on mouse wheel inside a div
body: <p>I have an slick carousel with vertical scroll. But i have an issue. the slider scrolls on entire page. I need to scroll on particular div like on product section div. . Could somebody suggest.</p>
  
  <pre><code>  Html Code: 
      &lt;section class="slide-wrapper"&gt;
          &lt;!-- Need to scroll only inside this div --&gt;
      &lt;/section&gt;
  
  Script: 
  
          var $slider = $("#slider");
          $slider.on('init', function () {
              mouseWheel($slider);
          }).slick({
              dots: true,
              vertical: true,
              infinite: false
          });
          function mouseWheel($slider) {
              $(window).on('wheel', { $slider: $slider }, mouseWheelHandler);
          }
          function mouseWheelHandler(event) {
              event.preventDefault();
              var $slider = event.data.$slider;
              var delta = event.originalEvent.deltaY;
              if (delta &gt; 0) {
                  $slider.slick('slickPrev');
              } else {
                  $slider.slick('slickNext');
              }
          }
  </code></pre>