垂直滚动在行内的div（col-md-6）外部不起作用

Question

我正在使用Slick滑块和bootstrap4。我在row的col-md-6内使用了slick滑块，并且我希望滚动在div（col-md-6）的行外工作。但我找不到解决问题的方法。有人可以建议我或帮助我解决问题吗？我已附上jsfiddle和codepen代码以供参考

var $ = jQuery;
$(document).ready(function () {
  $('.customer-logos').slick({
    vertical: true,
    infinite: false,
    arrows: false,
    draggable: true,
    dots: true });

});

const slider = $(".customer-logos");


slider.on('wheel', function (e) {

  var slideCount = $(this)[0].slick["slideCount"];
  var currentIndex = $(this).slick("slickCurrentSlide");
  var totalSildeToShow = $(this)[0].slick.options["slidesToShow"];

  if (e.originalEvent.deltaY < 0) {
  	e.preventDefault();
  	if (currentIndex == slideCount)
    return;
    
    $(this).slick('slickPrev');
  } else {
    if (slideCount - totalSildeToShow === currentIndex)
    return;
    e.preventDefault();
    $(this).slick('slickNext');
  }

});

h2{
  text-align:center;
  padding: 20px;
}
/* Slider */

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width:500px;
    height:250px;
}
.slick-dots {
    position: absolute;
    bottom: 37% !important;
    display: grid !important;
    width: 0 !important;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    top: 15%;
    right: 0;
}

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/slick/slick.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/slick/slick-theme.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<section style="height: 100vh;background: #f436e3"></section>
<h2>Our Partners</h2>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida, metus sit amet ornare pretium, sem velit facilisis arcu, id laoreet nibh augue ac justo. Duis pellentesque, elit id semper gravida, tellus ante porttitor nisl, et molestie nisi elit eu libero. Suspendisse ornare tincidunt tellus, vitae fermentum enim suscipit vitae. Proin et nisl sed neque commodo euismod aliquet consequat lectus. Integer vitae quam rhoncus, blandit enim ut, mollis justo. Donec pulvinar ex in facilisis venenatis. Ut ullamcorper eros sit amet leo dictum elementum eget sed urna.</p>
    </div>
    <div class="col-md-6">
      <div class="customer-logos slider">
        <div class="slide"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"></div>
        <div class="slide"><img src="https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg"></div>
        <div class="slide"><img src="https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg"></div>
        <div class="slide"><img src="https://image.freepik.com/free-vector/colors-curl-logo-template_23-2147536125.jpg"></div>
        <div class="slide"><img src="https://image.freepik.com/free-vector/abstract-cross-logo_23-2147536124.jpg"></div>
        <div class="slide"><img src="https://image.freepik.com/free-vector/football-logo-background_1195-244.jpg"></div>
        <div class="slide"><img src="https://image.freepik.com/free-vector/background-of-spots-halftone_1035-3847.jpg"></div>
        <div class="slide"><img src="https://image.freepik.com/free-vector/retro-label-on-rustic-background_82147503374.jpg"></div>

      </div>
    </div>
  </div>
</div>
<section style="height: 100vh;background: #f436e3"></section>

Answer 1

@@ pavankumar，请检查代码段和jsFiddle。这是您所要求的解决方法。但是您必须在响应部分上工作。请使用全屏查看实际的O / P

var $ = jQuery;
$(document).ready(function() {
  $('#slider_block').bind('mousewheel DOMMouseScroll', function(e) {
    const slider = $(".customer-logos");
    var slideCount = $(slider)[0].slick["slideCount"];
    var currentIndex = $(slider).slick("slickCurrentSlide");
    var totalSildeToShow = $(slider)[0].slick.options["slidesToShow"];

    if (e.originalEvent.deltaY >= 0) {
      if ((slideCount - 1) !== currentIndex) {
        e.preventDefault();
        var delta = e.wheelDelta || e.detail;
        this.scrollTop += (delta < 0 ? 1 : -1) * 30;
        $(".customer-logos").slick('slickNext')
      }
    } else {
      if (currentIndex != 0) {
        e.preventDefault();
        var delta = e.wheelDelta || e.detail;
        this.scrollTop += (delta < 0 ? 1 : -1) * 30;
        $(".customer-logos").slick('slickPrev')
      }
    }



  });

  $('.customer-logos').slick({
    vertical: true,
    infinite: false,
    arrows: false,
    dots: true
  });

});

const slider = $(".customer-logos");

slider.on('wheel', function(e) {

  var slideCount = $(this)[0].slick["slideCount"];
  var currentIndex = $(this).slick("slickCurrentSlide");
  var totalSildeToShow = $(this)[0].slick.options["slidesToShow"];

  if (e.originalEvent.deltaY < 0) {
    e.preventDefault();
    $(this).slick('slickPrev');
  } else {
    if (slideCount - totalSildeToShow === currentIndex)
      return;
    e.preventDefault();
    $(this).slick('slickNext');
  }
});

h2{
  text-align:center;
  padding: 20px;
}
/* Slider */

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width:500px;
    height:250px;
}
.slick-dots {
    position: absolute;
    bottom: 37% !important;
    display: grid !important;
    width: 0 !important;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    top: 15%;
    right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/slick/slick.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/slick/slick-theme.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<section style="height: 100vh;background: #f436e3"></section>
<section id="slider_block">
  <div class="container ">
    <h2>Our Partners</h2>
    <div class="row">
      <div class="col-md-6">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida, metus sit amet ornare pretium, sem velit facilisis arcu, id laoreet nibh augue ac justo. Duis pellentesque, elit id semper gravida, tellus ante porttitor nisl, et molestie nisi elit eu libero. Suspendisse ornare tincidunt tellus, vitae fermentum enim suscipit vitae. Proin et nisl sed neque commodo euismod aliquet consequat lectus. Integer vitae quam rhoncus, blandit enim ut, mollis justo. Donec pulvinar ex in facilisis venenatis. Ut ullamcorper eros sit amet leo dictum elementum eget sed urna.</p>
      </div>
      <div class="col-md-6">
        <div class="customer-logos slider">
          <div class="slide"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/colors-curl-logo-template_23-2147536125.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/abstract-cross-logo_23-2147536124.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/football-logo-background_1195-244.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/background-of-spots-halftone_1035-3847.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/retro-label-on-rustic-background_82147503374.jpg"></div>

        </div>

      </div>
    </div>
  </div>
</section>
<section style="height: 100vh;background: #f436e3"></section>