javascript - 垂直滚动在行内的 div(col-md-6) 外部不起作用

标签 javascript jquery slider slick.js

我正在使用 Slick slider 和 bootstrap 4。我在 row 内的 col-md-6 内使用了 slick slider ，并且我希望滚动在带有 row 的 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/slick-carousel@1.7.1/slick/slick.css">
<link rel="stylesheet" href="https://unpkg.com/slick-carousel@1.7.1/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>

最佳答案

@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/slick-carousel@1.7.1/slick/slick.css">
<link rel="stylesheet" href="https://unpkg.com/slick-carousel@1.7.1/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>

关于javascript - 垂直滚动在行内的 div(col-md-6) 外部不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60203668/

上一篇：javascript - 在 Three.js 和 WebGL 中渲染 2D SVG 时遇到问题

下一篇：javascript - react 带 : how to make dropDown menu's size fill all of the available space

相关文章：

javascript - 动态调用对象属性

python - 使用 wxPython 自定义 slider 小部件

javascript - 使用 setInterval 时，如果我在 Chrome 中切换标签并返回， slider 会疯狂追赶

wpf - 如何使 XAML Slider 元素仅对齐允许的值？

javascript - 为什么我的 jQuery UI Spinner 没有正确递增

javascript - 如何阻止变量在 JavaScript 中按 F5 时被破坏

javascript - 动态添加和删除行

javascript - 相对于指针位置缩放内容

javascript - 我正在尝试使用 Javascript 中的 while 循环打印从 10 到 40 的所有偶数

javascript - Node.js 16 -> 17 更改了 "localhost"的分辨率？

©2024 IT工具网  联系我们