Tips for building a sleek vertical carousel website

Looking to set up a sleek vertical carousel for my product list, specifically for a Kiosk Machine that utilizes touchscreen technology. I want the carousel to be smooth and scrollable.

I'm a bit unsure about which library or tools to use for this project.

Here's what I have so far: https://codepen.io/DilrajPutra10/pen/bPvQmM

$('.slick-carousel').slick({
  vertical:true,
  verticalSwiping:true,
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 0,
  speed:9000,
  cssEase: 'linear',
  infinite: true,
  arrows:false,
});

While on codepen, I managed to create a smooth scrolling effect, I'm facing a challenge with making it scrollable.

javascripthtmlcssfrontendcarousel

Answer №1

To ensure the carousel only starts when the user clicks the designated area, you can implement a click_handler function. 

function click_handler() {
     $('.slick-carousel').slick({
            vertical:true,
            verticalSwiping:true,
            slidesToShow: 3,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 0,
            speed: 9000,
            cssEase: 'linear',
            infinite: false,
            arrows:false,
      });
}

Keep in mind that the infinite parameter is specifically set to false in this function.

To apply this in the HTML, simply add the following code snippet:

<div class="slick-carousel" onclick="click_handler(this)">

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

Is it possible to exclude specific URLs from CSRF protection in sails.js?

I am currently integrating Stripe with my sails.js server and need to disable CSRF for specific URLs in order to utilize Stripe's webhooks effectively. Is there a way to exempt certain URLs from CSRF POST requirements within sails.js? I have searched ...

javascriptnode.jssails.jscsrfstripe-payments

Passing a property to a click event handler in ES6 with React: What's the best approach?

Struggling with passing props to a click function in my React learning journey. I'm attempting to make a basic ES6 counter component that increases when a button is clicked. The click function I have so far is: click() { this.setState({ c ...

javascriptreactjs

Add the URL link according to the specific domain name

I am looking for a way to attach additional URL parameters to any links that contain example.com on a webpage. The current script I have only works if the link does not already have parameters attached to it. <script> document.body.innerHTML = d ...

javascript

Assigning names to the points on the AxisHelper component in THREE.js

Take a look at the code snippet provided below: <html> <head> <title>My first Three.js app</title> <style>canvas { width: 100%; height: 100% }</style> </head> <body ...

javascriptcanvasthree.js

Discovering the dimensions of a div for a mobile browser

I'm in the process of replicating the layout found at using HTML5 and CSS3, but I'm encountering an issue with the height. I've measured the footer's height to be 50px. While it displays fine on desktop browsers, it appears significant ...

htmlmobilecssmobile-browser

What could be causing app.put() to fail in updating documents within mongodb?

I am currently working on implementing a form in an ejs file where, upon clicking a button, the "likes" attribute of a displayed document from my mongoDB collection should be set to 0 using a "PUT" request. However, for some reason, the document does not u ...

javascriptmongodbexpressroutesejs

Is it possible to integrate ng-repeat with ng-model in Angular?

Is it possible to link the ng-model of a button with the ng-repeat loop? <a ng-repeat="x in [1,2,3,4]" ng-model="myButton[x]">{{myButton[x]}}</a> In the Controller: var id = 4; $scope.myButton[id] = ' :( '; I am interested in crea ...

javascriptangularjs

The "truth" parameter within the xmlHttpRequest .open() function

After referencing MDN, it mentioned that by default, the JavaScript function will keep running until the server response is received. This is essentially what AJAX is all about - Asynchronous JavaScript and XML. Even though I have some experience with A ...

javascriptajaxasynchronousxmlhttprequest

Check Image Dimensions prior to Image Loading

I've been working with JQuery Masonry and would like to incorporate Lazy Load using a WordPress plugin to load images only when they come into view. The issue I'm facing is that when Lazy Load is used, the masonry elements don't recognize t ...

javascriptjquerylazy-loadingjquery-masonryimage-size

Using a wildcard (*) to select elements with JQuery

I'm just starting to learn about JQuery and could use some help. I want to select multiple elements but I only know part of their Ids: for example: <div id="element32422455">Some content</div> <div id="element68475124">Some content& ...

javascriptjqueryjquery-selectors

navbar item arranged in a row using Bootstrap 5

I am looking to create a fixed top navbar with just one row, instead of two rows. Here is the code I currently have: <div class="col-md-3"> <ul class="navbar-nav mb-2 mb-lg-0"> <li class="nav-item"&g ...

htmlbootstrap-5

having difficulty accessing the value within the Angular constructor

My current issue arises when I click on a button and set a value within the button click method. Despite declaring the variable in the constructor, I am unable to retrieve that value. The code snippet below demonstrates this problem as I keep getting &apos ...

javascriptangulartypescript

Choosing the Laravel 6 option for editing via AJAX: A step-by-step guide

I am looking to update a user who resides in a specific state within a country. The country and state fields are dropdown select options, with a relationship established between them and the user. The state field is populated based on the selected country. ...

javascriptphpajaxlaravel

Unable to properly shut the sliding-over modal

I have implemented a customized version of the codrops slide & push menu (http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/) to create an overlay on my webpage. However, I am facing difficulty in closing it using another link. Any assistance on ...

jqueryhtmlcss

What is the reason for Cypress choosing to omit specific commands?

The test below aims to scan and authenticate a QR code, then utilize the received authentication token. However, for some reason, the last two commands (.type) are not being executed. I've been stuck at this point for quite some time now. Any insights ...

javascriptcypressqr-codetotp

Sort and incorporate elements by multiple strings present in an array

Looking to filter and include strings in an array by matching them with items in another array? Here is a sample code snippet that filters based on a single string: const filteredString = `${this.filter}`.toLowerCase(); this.filteredCampaigns = this. ...

javascripttypescript

Tips for clearing object values without deleting the keys: Resetting the values of an object and its

Upon creating a service to share data among multiple components, it became necessary to reset the object values once the process was complete. To achieve this, I attempted the following: this.UserDetails = {}; This successfully cleared the values and remov ...

javascriptangulartypescriptobjectangular6

Inserting data into a table using variables in Mssql database management system

I'm really struggling to find a way to safely add my Variables into an MSSQL server. I've tried everything. Could someone please help me and provide the solution for adding my Variables into the Database? It is crucial that I prevent any possib ...

javascriptsql-serverexpress

What is the process of encapsulating a callback function within another callback function and invoking it from there?

Here is the code snippet I am working with: var me = this; gapi.auth.authorize({ client_id: client, scope: scope, immediate: true }, function (authResult: any) { if (authResult && !authResult.error) { me ...

javascriptcallbacktypescript

Leveraging Node.js socket.io alongside React's web worker for streamlined communication

I have a project that involves using socket.io, React.js, and Webworkers https://i.sstatic.net/3SUg3.png Components A and B are child components of the Home page component. These components also function as tabs, so when A is mounted, B is unmounted, and ...

javascriptnode.jsreactjssocket.io