How to create Horizontal Drag/Scroll

Design help Animations & Interactions
1

Hello,
I would like to know if someone knows how to create this slider effect.

It is a horizontal scroll + an horizontal dragging.

Thanks in advance,

1 Like
2

Hello.
Maybee this helps? - How to Webflow: Horizontal scrolling section - YouTube

4

Hey, @Josep_Pedro You can clone this draggable slider created by @timothy1643 add an ID to the left and right arrows, and the code to control them using the mouse wheel.

https://webflow.com/website/Draggable-CMS-Slider

Code to hack the mouse wheel to control the slider arrow.
You can hide both arrows if you don’t want your users to see one.

<script>
  window.addEventListener("wheel", function (event) {
    if (event.deltaY < 0) {
      $("#ID of an left arrow").trigger("click");
    } else if (event.deltaY > 0) {
      $("#ID of an right arrow").trigger("click");
    }
  });
</script>

This is one way where you can achieve horizontal drag and scroll effect, Hope it helps :peace_symbol:

1 Like
5

Hi Sachin,

I am using basic hosting plan so I don’t have CMS, how can I do it without it? I’ve watched Tim’s video and tried to create the same settings without CMS, it doesn’t really work.

I really appreciate if you can have a look at my website.

thank you!

6

Hey, @Daphne_wang In that case, you can use something like Glide.js as it has an inbuilt draggable functionality and it’s responsive. I haven’t tried it on any project yet but I’ve added it in my backlog and will get back with a cloneable.

8

Thank you so much! It works.

9

@Daphne_wang : Please tell me how did you integrate Glide.js into your webflow website to achieve horizontal scrolling and horizontal drag?

10

@Josep_Pedro this is simple create a div and add all the slide inside it and and the the main div width 100vw and height 200vh and make is sticky and add section scroll intraction on it and set in smoothness 100%

11

Hey @Sachin : Can you help me in integrating Glide.js to a webflow project?

12

@harshit1105 I was trying to find you the CSS file but forgot where I got it from. But if you copy the code below in your CSS

.glide {
  box-sizing: border-box; }
  .glide * {
    box-sizing: inherit; }
  .glide__track {
    overflow: hidden; }
  .glide__slides {
    list-style: none;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    touch-action: pan-Y;
    white-space: nowrap;
    flex-wrap: nowrap;
    will-change: transform; }
    .glide__slides--dragging {
      user-select: none; }
  .glide__slide {
    flex-shrink: 0;
    white-space: normal;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent; }
    .glide__slide a {
      user-select: none;
      -webkit-user-drag: none;
      -moz-user-select: none;
      -ms-user-select: none; }

  .glide--rtl {
    direction: rtl; }
    
/* below are all the code from the glide.js theme.css */    


.glide--swipeable {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab; }

.glide--dragging {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing; }

then add this to your Javascript

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@glidejs/glide"></script>

You can find the example code here for basic setup and need to follow the structure,

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide">0</li>
      <li class="glide__slide">1</li>
      <li class="glide__slide">2</li>
    </ul>
  </div>
</div>

For any advance setup, you can go to options: Glide.js | A dependency-free JavaScript ES6 slider and carousel

I would suggest also check out Timonthy Ricks Youtube Video about Slide.js for a better understanding., it is a very similar library with a similar setup

Cheers,
Daphne

1 Like