Smooth Slide Show Scrolling with Mouse Wheel Within a Container

My slick carousel with vertical scroll is causing issues as it scrolls the entire page. I am specifically looking to have it scroll within a particular div, such as the product section div. Any suggestions on how to achieve this?

  Html Code: 
    <section class="slide-wrapper">
        <!-- Need to scroll only inside this div -->
    </section>

Script: 

        var $slider = $("#slider");
        $slider.on('init', function () {
            mouseWheel($slider);
        }).slick({
            dots: true,
            vertical: true,
            infinite: false
        });
        function mouseWheel($slider) {
            $(window).on('wheel', { $slider: $slider }, mouseWheelHandler);
        }
        function mouseWheelHandler(event) {
            event.preventDefault();
            var $slider = event.data.$slider;
            var delta = event.originalEvent.deltaY;
            if (delta > 0) {
                $slider.slick('slickPrev');
            } else {
                $slider.slick('slickNext');
            }
        }

Answer №1

Hey there! I was facing a similar issue but thankfully I was able to find a solution. If you're interested, you can check out the reference links below:

Reference: https://github.com/kenwheeler/slick/issues/122

Additional resources:

Here is the code snippet that helped me resolve the issue:

const slider = $(".slider-item");
slider
  .slick({
  vertical: true,
  infinite: false,
  arrows:false,
  dots: true
  });

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

  if (e.originalEvent.deltaY > 0) {
    $(this).slick('slickNext');
  } else {
    $(this).slick('slickPrev');
  }
}));
CSS Snippet:
body{
  background: #419be0;
}
.container {
  margin-left:auto;
  margin-right:auto;
  width: 100%;
  color: #333;
}
.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
  margin:10px;
}

h4{
  text-align:center;
}
h3{
  text-align:center;
  height:200px;
}
JavaScript and CSS Library links:
<script src="https://cdn.jsdelivr.net/gh/kenwheeler/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e4d52575d557e0f1006100e">[email protected]</a>/slick/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/kenwheeler/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c3f20252f270c7d6274627c">[email protected]</a>/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/kenwheeler/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cebda2a7ada58effe0f6e0fe">[email protected]</a>/slick/slick.css" rel="stylesheet"/>

Feel free to explore the provided links and code snippets to resolve your issue.

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

Retrieving information from an external API in response to an express GET request

After reviewing the sample code in the gtfs-realtime-bindings library's documentation, I attempted to implement a similar logic within my router. However, I encountered issues with extracting the result from the request() route.get('/', (req ...

Generating separators in every third row using an array of card elements

https://i.stack.imgur.com/PIMR2.png Hey everyone, I'm working on creating a Divider for every row of 3 items. Currently, my setup only handles two sets of rows, but there could be an unlimited amount of rows that need this divider. I am using slice t ...

Error encountered while trying to load the fonts

Upon attempting to load fonts into the Spectacle boilerplate, I encountered the following error message: Failed to decode downloaded font: http://localhost:3000/assets/fonts/Overpass-Bold.ttf OTS parsing error: invalid version tag I've includ ...

Attempting to retrieve JSON data using jQuery

Currently, I have a PHP file that outputs JSON data like the following: {"news":[{"title":"title news example1","content":"blabla bla 1","img":"url"}, {"title":"title news example2","content":"blabla bla 2","img":"url2"}, {"title":"title news example3","c ...

Creating a horizontal scrollbar in columns using Bootstrap can be accomplished by adjusting the CSS properties

Having a container created with boostrap: https://i.sstatic.net/bqAuf.png The question at hand is how to implement horizontal scrolling in order to maintain the aspect ratio of the initial image within the container on phone resolutions. Here is the con ...

Any tips for avoiding a new line when generating html attribute values to prevent my json string from breaking?

When working with JSON string values in button element attributes, I have encountered an issue where a single quote causes the value to break and create newlines. For example: var $json = JSON.stringify('{"Long_text":"This is \'my json stri ...

Generate time-dependent animations using circles

Hey there, I am trying to create an animation that involves drawing three circles and having one of them move from right to left. The circles should appear randomly in yellow, blue, or orange colors on the canvas at different intervals (3 seconds between ...

Having trouble retrieving the JSON output as a variable value in my JavaScript page using PHP

I need to achieve the following output format: var sampleTags = ['c++', 'scala']; This is my JavaScript function: <script> $(document).ready(function(){ $(function(){ var sampleTags; ...

Is there a way to execute a POST command in HTML without utilizing a form tag?

Currently, I have a form that gathers input from the user and redirects to a new page upon submission by clicking a button. However, I am looking for a way to automatically open this destination page when the current page loads, without the need for manual ...

Showcasing a Collection of Dropdown Options for All Angular Material Icons in Angular Versions 2 and Above

I'm currently developing an Angular 10 application that utilizes Angular Material Icons. I am in search of a method to dynamically showcase a dropdown menu containing all the available Material Icons. My attempt to programmatically retrieve the icon ...

Problem with Ajax functionality on Jquery Dialog

I have implemented a Jquery.dialog feature in my application for sending messages. When the user clicks on "new", the dialog box appears, allowing them to select the recipient (currently working with IDs instead of usernames). On the first opening of the ...

Setting a constant width for text characters across all devices using CSS and HTML

I am looking to display text in my textarea with the same width in pixels across all devices. Essentially, I want to set the character width in pixels so that it appears consistently on any device (Desktop/Mobile). <html> <head> <styl ...

Text input setting for jQuery UI Slider

Currently, I am utilizing jQuery UI sliders to input values in text boxes. However, I would like this functionality to be bidirectional; meaning if a value is entered into the text box, I want the slider to move to the corresponding position. I am unsure ...

Refreshing the "OnMounted" Vue3 component

Recently, I encountered a situation where I have a Vue3 Dynamic Component enclosed within a <keep-alive> tag. This component facilitates navigation within a PrimeVue <Dialog> and is populated by an object: const component = [ { id: 0, ...

The issue I am facing is that the map function is not functioning correctly when I click

I am currently working on a project in ReactJs that includes a sidebar with dropdown menu functionality. Desired Outcome When I click on an option in the sidebar that has a submenu, it should display that submenu and close upon another click. Curr ...

Unable to update the numerical value in the Material-UI version 5 TextField component

When attempting to display the decimal value 1.0 in the MUI5's TextField component, I encountered an issue. While I can change its value using the icons within the TextField, inputting any value directly seems to be ineffective. Additionally, backspac ...

Unable to "serialize" geoJSON information

While working with Leaflet JavaScript, I am attempting to retrieve data directly from GeoServer using an Ajax link. To display it nicely in a DataTables table, I need to convert it into JSON format as per DataTables instructions. However, I keep encounteri ...

Switch between the table data elements in an .hta document

The response provided by Dr.Molle in a previous post here was accurate, but it only functioned with <div>. I am required to utilize <table>. Though I found a script that works flawlessly outside of my VBScript, it does not work when embedded in ...

React State not refreshing

Currently tackling a challenging e-commerce project and facing an obstacle with the following component: import React, { useEffect, useState } from 'react'; const Cart = () => { let [carts, setCarts] = useState([]); let [price, se ...

How can I efficiently add multiple items to an array and store them in async storage using React Native?

I am trying to store multiple elements in local storage using React Native. I found some helpful documentation on how to do this here. Could someone guide me on the correct way to achieve this? Here's a snippet of my code: My current approach const ...