Quit swiping the screen, start swiping the carousel

I am facing an issue with achieving a specific effect on my website. I have implemented carousels, and I want them to start scrolling when the page is scrolled to them (halting page scroll), and once all slides have been viewed, resume page scrolling.

var slider = $('.slider');
$('.slider').slick({
  dots: false,
  vertical: true,
  arrows: false,
  variableWidth: false,
});

slider.on('wheel', (function(e) {
  e.preventDefault();
  if (e.originalEvent.deltaY < 0) {
    $(this).slick('slickPrev');
  } else {
    $(this).slick('slickNext');
  }
}));
.slide {
  background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="56253a3f353d7b353724392325333a1667786e7867">[email protected]</a>/slick/slick.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95e6f9fcf6feb8f6f4e7fae0e6f0f9d5a4bbadbba4">[email protected]</a>/slick/slick.min.js"></script>

<section id="carousel">
  <div class=" position-relative">
    <div class="container">
      <div class="slider">
        <div class="slide">
          <h1>Slide 1</h1>
        </div>
        <div class="slide">
          <h1>Slide 2</h1>
        </div>
        <div class="slide">
          <h1>Slide 3</h1>
        </div>
        <div class="slide">
          <h1>Slide 4</h1>
        </div>
      </div>
    </div>
  </div>
</section>

and view the demo here

Any suggestions on how to implement this? To pause page scrolling while carousel is active?

javascriptjqueryhtmlcssslick.js

Answer №1

Encountering an issue with the edge event not functioning as expected. The beforeChange event fails to trigger when reaching the first or last slide despite setting the infinite property to true. To address this, I have implemented a check for the last (or first) slide using isLast. Take a look at the code snippet below:

var slider = $('.slider'),
  isLast = true,
  stop = false,
  next = 0;
$('.slider').slick({
  dots: false,
  vertical: true,
  arrows: false,
  variableWidth: false,
  infinite: false,
  speed: 300
});

slider.on('wheel', (function(e) {
  if (!stop) {
    if (e.originalEvent.deltaY < 0) {
      $(this).slick('slickPrev');
    } else {
      $(this).slick('slickNext');
    }

    if (!isLast) {
      event.preventDefault();
      isLast = true;
    } else {
      if (next != 0)
        stop = true;
    }
  }

}));

$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  isLast = false;
  next = nextSlide;
});

$('.slider').on('edge', function(event, slick, direction) {
  console.log(slick, direction);
});
.slide {
  background: green;
  height: 300px;
}

.container {
  margin: 300px 0;
} 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick/slick.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick/slick.min.js"></script>

<section id="carousel">
  <div class=" position-relative">
    <div class="container">
      <div class="slider">
        <div class="slide">
          <h1>Slide 1</h1>
        </div>
        <div class="slide">
          <h1>Slide 2</h1>
        </div>
        <div class="slide">
          <h1>Slide 3</h1>
        </div>
        <div class="slide">
          <h1>Slide 4</h1>
        </div>
      </div>
    </div>
  </div>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using the array.filter method to calculate and pass a value in React always triggers a re-render

I am facing an issue with a component that computes values to pass based on array.filter. The problem is, even if the elements in the array are identical, it triggers a new render due to props changing each time. This component relies on values computed f ...

javascriptreactjs

Whenever I nest my div tags within another div element in an HTML document

Whenever I try to position a div inside another div using float, I encounter problems. <div id="main"> <div id="anotherDiv"> <h1>Test</h1> </div> </div> Here is the corresponding style sheet: #main{ ba ...

htmlcss

What is the most efficient method for transmitting 30 variables from the client side to the server?

Hello, I am currently working on a project where users are able to create and modify about 30 variables. These variables do not come from user input, so submitting a form is not feasible. After the modification process is complete, a JavaScript function pr ...

phpjavascripthttp-postclient-server

Further exploration of key frames in CSS

Assuming I start with: @keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} Can I modify it to achieve the following effect where it jumps left to right and back as its main position? @keyframes animateLeftJump{ from{left:-300px;opac ...

css

What steps should be taken to retrieve the contents of a file that has been chosen using the browse

You have successfully implemented a browse button that allows the user to navigate the directory and choose a file. The path and file name are then displayed in the text element of the Browse button complex. Now, the question arises - how can I extract dat ...

javascriptjquerypythonhtmldom

Ways to adjust the positioning of antd card?

Is it possible to display my antd card in the center directly when a button is clicked? Currently, I have implemented the code to achieve this behavior but upon clicking the button, the card initially appears on the left before aligning itself in the cente ...

javascriptcssnode.jsreactjsantd

The values are failing to update within the update panel

I have exhausted all the suggested solutions provided here in relation to my issue with no success. I am working on creating some graphs using the Dygraphs library. The JavaScript code snippet below represents just a fraction of the complete function, as I ...

javascriptasp.netasp.net-ajaxupdatepaneldygraphs

Updating Loader on Button Press in Bootstrap 4.4: Switching or Concealing Spinner Post-Loading

After searching through various questions related to this topic, I have yet to find one that specifically tackles what I'm looking for with the latest Bootstrap version 4.4. Before we go any further, please take a look at this fiddle: https://jsfiddl ...

javascriptjquerybootstrap-4

Learn the technique for showcasing images side by side in HTML

As I delve into the realm of HTML, I'm encountering some challenges that are leaving me scratching my head. My goal is to have three images aligned in a row horizontally, like this: | img 1 | img 2 | img 3 |. The outer div container I'm working w ...

htmlcss

Alert for every URL modification

Is it feasible to receive (event) notifications for every URL change (without refreshing the page, as possible with location.replaceState())? To clarify: I am not altering components or pages, just updating the URL for future reference. UPDATE Potential ...

javascriptangularroutes

Issue with AngularJS ng-click not firing function inside ui-gmap-window

section, I am encountering an issue with a click event that I have connected to a Google Maps info window using an <a> tag. Strangely, it seems that the function is not being triggered even though it shows as activated. I attempted to rectify this b ...

javascriptangularjsgoogle-mapsionic-v1

The form isn't accessible through a new tab

I'm having an issue with the code I've written. Even though I specified target="_blank" in the form, it's not opening in a new tab like I intended. <script> function navigate() { var webUrl = "https://website.com/search/" + document.g ...

javascripthtmlformstabstarget

Error encountered after attempting to save with incorrect configuration settings for the resource

A portion of my code involves a service module that sends data using the POST method: //services.js var myServices = angular.module('myServices', ['ngResource']); myServices.factory('User', ['$resource', function($ ...

javascriptangularjs

What is the best way to ensure consistent font display across all devices?

I recently implemented the "spectral" Google font on my website, magpieandcapricorn.com. As I dive into responsive design, I've encountered a peculiar issue - the Spectral font displays on my iPhone but not on my husband's Android phone. How can ...

htmlcssfontsresponsive

Avoiding a jest compile error and executing the test efficiently

Here is my Vue.js code snippet: export default { name: 'App', components: { }, created() { let t = typeof t === 'undefined' ? {} : t; // ISSUE LINE } } The ISSUE LINE runs successfully in the browser without any errors an ...

javascriptvue.jsjestjsbabeljsbabel-jest

There seems to be a problem with Bootstrap 4 Nav-tabs when forms are added inside them, causing

Previously, when the content consisted only of text and you clicked on the nav-tabs link, it displayed the necessary information. However, after adding these forms, the functionality stopped working. It seems like the issue lies with form integrations. Her ...

htmltwitter-bootstrapbootstrap-4input-fieldbootstrap-tabs

Having trouble rendering image-based textures on a mesh imported from Blender

Two cubes are created with the following code using the same material. The first cube's geometry is generated with new THREE.BoxGeometry(), while the second cube's geometry is imported from Blender. The first cube displays the expected texture lo ...

javascriptthree.jsblender

Ways to eliminate spacing around lists?

I am trying to remove the margin on the left side of a list that contains 3 items. Here is my code: ul li { display: inline; list-style: none; } <ul> <li>I have margin space on my left side</li> <li>List 2</li> & ...

htmlcss

Personalized Angular calendar selector

Looking for an Angular datepicker with unique input features such as: Ability to navigate using keyboard (e.g. keydown for previous day, keyup for next day) within the input field itself (not just in the datepicker popup) Autocomplete functionality, for ...

javascriptangulardatepicker

What is the best way to navigate to a specific element using jQuery?

I am having an issue with scrolling to a specific div at the top of my page. Even though I have buttons for other sections, when I scroll to the bottom and click on the button, it does not take me to the top of the page as intended. You can view the CodeP ...

javascriptjqueryhtmlcssdom