[英]Vertical Scroll doesn't work outside div(col-md-6) within row
I am using Slick slider and bootstrap 4. I used slick slider inside col-md-6 within row , and I want the scroll to work outside div(col-md-6) with row.我正在使用 Slick 滑块和引导程序 4。我在 row 内的 col-md-6 内使用了 Slick 滑块,并且我希望滚动在 div(col-md-6) 外与 row 一起工作。 but I am not able find the solutions for the problem.
但我无法找到问题的解决方案。 Can anybody suggest me or help me how to solve the problem?
有人可以建议我或帮助我如何解决问题吗? I have attached the jsfiddle and codepen Code for reference
我附上了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, check the snippet and jsFiddle . @pavankumar,检查代码段和jsFiddle 。 This is a workaround of what you asked.
这是您所问的解决方法。 But you have to work on responsive part.
但是你必须在响应部分工作。 Please use full screen to see the actual O/P
请使用全屏查看实际 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.