dragging to scroll horizontally through a list of cards

I'm currently working on a website using Bootstrap, CSS, HTML, and JS. I'm struggling to figure out how to make the product cards move horizontally without requiring a scrollbar. Is there a way to do this with just clicking and dragging?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
        <h1 class="mt-5">Bootstrap 4 Horizontal Scrolling</h1>
        <p class="subtitle">Horizontal scrolling without CSS. Just copy scrolling wrapper classes</p>
        <div class="scrolling-wrapper row flex-row flex-nowrap mt-4 pb-4 pt-2">
            <div class="col-sm-5 col-md-4 col-large-3">
                <div class="card card-block card-1">
                    <div class="card">
                        <img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
                        <div class="card-body">
                            <h4 class="card-title">John Doe</h4>
                            <p class="card-text">Some example text.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-5 col-md-4 col-large-3">
                <div class="card card-block card-1">
                    <div class="card">
                        <img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
                        <div class="card-body">
                            <h4 class="card-title">John Doe</h4>
                            <p class="card-text">Some example text.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-5 col-md-4 col-large-3">
                <div class="card card-block card-1">
                    <div class="card">
                        <img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
                        <div class="card-body">
                            <h4 class="card-title">John Doe</h4>
                            <p class="card-text">Some example text.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-5 col-md-4 col-large-3">
                <div class="card card-block card-1">
                    <div class="card">
                        <img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
                        <div class="card-body">
                            <h4 class="card-title">John Doe</h4>
                            <p class="card-text">Some example text.</p>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

I don't mind if it involves JS, Bootstrap, or any other technology since I'm new to coding.

javascripthtmlcssbootstrap-4

Answer №1

This carousel is created using Bootstrap 4 with some custom styling to enhance its appearance, along with JavaScript functionalities that handle mouse events.

Interactive Click and Drag Carousel with Cards 
const slider = document.querySelector('.items');
  let isDown = false;
  let startX;
  let scrollLeft;

  slider.addEventListener('mousedown', (e) => {
    isDown = true;
    slider.classList.add('active');
    startX = e.pageX - slider.offsetLeft;
    scrollLeft = slider.scrollLeft;
  });

  slider.addEventListener('mouseleave', () => {
    isDown = false;
    slider.classList.remove('active');
  });

  slider.addEventListener('mouseup', () => {
    isDown = false;
    slider.classList.remove('active');
  });

  slider.addEventListener('mousemove', (e) => {
    if (!isDown) return;  // stop the fn from running
    e.preventDefault();
    const x = e.pageX - slider.offsetLeft;
    const walk = (x - startX) * 3;
    slider.scrollLeft = scrollLeft - walk;
  });
.items{
  overflow: hidden;
  user-select: none;
  cursor: pointer;
  transition: all 0.2s;
  transform: scale(0.98);
  will-change: transform;
  position: relative;
}

.items.active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
  transform: scale(1);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
...

If you have any further questions or need clarification, please feel free to leave a comment.

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

Best placement for transition effects in a dropdown menu animation

<div class="dropdown"> <button class="dropbtn">ALAT</button> <div class="dropdown-content"> <a href="index2.php"><img src="home.jpg" class="home" width="7 ...

htmlcssdrop-down-menucss-animationscss-transitions

Troubleshooting problem with $http in AngularJS: encountering challenges with HTTP JSONP requests

I encountered the following error message while attempting to utilize the JSONP method in AngularJS: Uncaught SyntaxError: Unexpected token : http://example.com/getSomeJson?format=jsonp&json_callback=angular.callbacks._0 Could someone please ass ...

javascriptangularjsajaxjsonp

Managing a webpage using Xcode and Swift's UIWebView

Recently, I developed a straightforward application that guides users to a web-based platform. One of the app's pages allows users to search for store stock from various stores by manually inputting the store number or utilizing automatic location det ...

javascriptuiwebviewswift3xcode8

Lodash Debounce failing to properly debounce

Currently, I am attempting to use Lodash to debounce a function but it doesn't seem to be working properly. My issue appears to be different from what others have experienced on both Stack Overflow and Google when using the _.debounce method. The imp ...

javascriptangularjscoffeescriptunderscore.jslodash

Searching for a specific set of rows within an array? Look no further than jQuery and JavaScript

I'm struggling to find the right title for my project, but I'm doing my best to capture its essence. I am in the process of developing a calculator that compares values within multiple arrays. Each data item in my array consists of 34 rows, wit ...

javascriptjqueryarrays

Ways to make logo image go over/out of header

I am attempting to create a design where the logo image extends beyond the header and into the content as you scroll, giving the impression that the logo is oversized for the header and protruding from the bottom. Visit the website: For an example of a s ...

css

Vue.js - Displaying validation errors when a user interacts outside of a component

The ExamEditor Vue component I am working on is quite complex, consisting of sub-components like QuestionEditor and ExerciseEditor. These components are all tied to an exam object that contains nested arrays with questions and more. The layout inside the e ...

javascriptformsvue.jsvalidationuser-experience

utilizing AJAX to retrieve scripts from WITHIN my own domain

In the realm of ajax scripts, I encounter a scenario where referencing something within the same domain requires passing HTML and associated javascript. Due to it being a non X-domain setup, I anticipate that this could be achievable. The aim here is to fe ...

javascriptjqueryajaxjson

The callback function for the `input` component in React Native must be a function and should not be undefined. Always remember to start component names with the proper syntax

There was a gap in my project as I have an application currently under development for testing purposes. Error: The view config getter callback for the component input must be a function (received undefined). Make sure to capitalize component names. I am ...

javascriptreactjsreact-native

The inner workings of Virtual DOM in React and Vue disclosed

I am a student experimenting with creating my own Virtual DOM for a college project in JavaScript, keeping it simple without advanced features like props or events found in popular frameworks like React and Vue. I'm curious about code splitting. If I ...

javascriptreactjsvue.js

Exiting a NodeJs function entirely rather than just returning from an internal function

There is a function in my code app.post('/assignment/loan', (req, res) => { Within that function, there is another function db.run('SELECT loanable FROM book WHERE id=?',[bookID],(err,row)=>{ I tried using return but it only exi ...

javascriptnode.jssqliteexpress

Submitting forms with CakePHP and AJAX

I'm struggling with implementing ajax and jQuery functions. I need to update my database table based on checkbox values. Below is the code snippet from a ctp file: $(".chk").click(function(e){ e.preventDefault(); var id = $(this ...

javascriptphpajaxcakephp

Iterating over the local storage to locate a specific item

Utilizing local storage extensively has been beneficial for maintaining state by storing the session on the client side. However, a challenge arises when updating the session. Within my code, there are multiple lists of objects that I serialize in JSON fo ...

javascriptlocal-storage

Slider with FadeIn effect remains unresponsive to the FadeOut command (JQuery / Javascript)

I'm currently working on a slider that is supposed to fade in and out. However, I am facing an issue where the slide fades in correctly but instantly disappears instead of fading out. Do you have any insights into why this might be happening and any s ...

javascriptjqueryhtmlcssanimation

"Revamping the text style of input materials in React JS: A step-by

How can I modify the style of the text field component in Material UI? Specifically, I would like to change the appearance of the text that the user enters. I have attempted to use the Material API, but it has not provided the desired results. Here is an ...

javascriptreactjsmaterial-ui

Exploring the world of Vue.js object mapping

I currently have the following object: data: () => ({ customer: { item: { name: undefined }} }) This object is being used in the template as follows: <v-number separator="." decimal="2" ...

javascriptvue.jsobjecttemplates

Ensuring Bootstrap 3 Table Header Widths Remain Fixed

How can I ensure the header columns in my Bootstrap 3 table maintain a fixed width, regardless of the content in the regular rows? I want to avoid the messy look of content splitting onto multiple lines. Here's an example: I'd prefer not to adju ...

htmlcsstwitter-bootstrapstyling

Looking to optimize the JavaScript code for improved performance speed

Is there a more efficient way to avoid writing the same lines of code repeatedly without compromising performance? I've attempted using a for loop to categorize fields as 'mandatory' or 'optional', but it still requires duplicating ...

javascriptarraysangularjs

Terminal throws an error stating that no default engine was specified and no extension was provided

I have been working on executing a backend program in Node.js using MongoDB. I have created a form with two input fields for password and name. I am not utilizing any HBS or EJS and my VS Code terminal is displaying the following error: No default engine ...

javascripthtmlcssnode.jsmongodb

Conversion to object fails when attempting to utilize JSON.parse

In my HTML document, I have a ng-class attribute with specific conditions. How can I access the attributes for twitter and yahoo within this code block? ng-class="{twitter: 2 < id , yahoo : 2 > id}" The typeof ng-class is set to object, but attempt ...

javascriptangularjs