Vertical Scroll doesn't work outside div(col-md-6) within row

Question

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. 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

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>

I want the vertical slider scroll working in the row. I mean on scrolling left side(Lorem ipsum text) the vertical slider should work. The slider should change when scrolling on left side also. @AkhilAravind — Pavankumar Kori, Feb 13 '20 at 12:25
Thats a weird implementation, I think it might broke the entire page :). — Akhil Aravind, Feb 13 '20 at 12:28
Dont Know but the design is like that. and I am working for that functionality from past week. I tried other plugins also. Can you help me with the problem. — Pavankumar Kori, Feb 13 '20 at 12:34
If the scroll work over the text, then how the page scroll work ?? — Akhil Aravind, Feb 13 '20 at 15:05
Like this link https://sapdesign-sandbox.webflow.io/half-on-half-layout — Pavankumar Kori, Feb 14 '20 at 05:11
like the above link when we scroll left side right side vertical slider should scroll, either side vertical slider should scroll. after completing all the vertical slider it should go to next section. — Pavankumar Kori, Feb 14 '20 at 05:16
I got the point, but they are not using slick slider, we need to add some js logic there, i will try from my end :) — Akhil Aravind, Feb 14 '20 at 05:17
ok That would be very helpfull. If u dont mind can you look over this problem https://stackoverflow.com/questions/60220850/scroll-up-to-the-previous-div-when-scrolling-back-to-top — Pavankumar Kori, Feb 14 '20 at 06:03

score 1 · Accepted Answer · answered Feb 14 '20 at 06:35

@pavankumar, check the snippet and 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

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>

Thank You Very much. Its working in google chrome, But not working in Firefox browser — Pavankumar Kori, Feb 14 '20 at 07:19
It was not working in Firefox Browser. I adding jquery.mousewheel.min.js now its working. Dont Know should check with tester while testing. As of now its working. Thanks a lot. — Pavankumar Kori, Feb 17 '20 at 07:04
@PavankumarKori you are welcome bro, I dont have IE or firefox to test, we here only focus on chrome. any way happy to hear you fixed it. dont forget for the upvote bro. :) — Akhil Aravind, Feb 17 '20 at 07:11
As my lead said If your function works in Firebox, then it works in all browser. so will only work on firebox. once again thank you for your help. I did Upvote bro — Pavankumar Kori, Feb 17 '20 at 07:24
@PavankumarKori welcome bro, you can ping me when ever needed, you can check my profile for contact details — Akhil Aravind, Feb 17 '20 at 07:34
Hello Akhil Aravind. scroll up on image side(right side) is not working (for first Image) and for last image is it scrolling down continuously without stopping at last slide. Can you help with this — Pavankumar Kori, Apr 07 '20 at 07:57

Vertical Scroll doesn't work outside div(col-md-6) within row

1 Answers1