Turn off dragging on Glide.js carousel

Question

I want to turn off changing slide by dragging, and to go loop through slides just with 'prev' - 'next' buttons. I set swipeThreshold: false, as said in documentation https://glidejs.com/docs/options/. But I can still drag slides, as you can se in code below. How can I disable slides dragging?

function coverflow(i, el) {
    el.removeClass('pre following')
        .nextAll()
            .removeClass('pre following')
            .addClass('following')
        .end()
        .prevAll()
            .removeClass('pre following')
            .addClass('pre');
}
 
$('#Glide').glide({
    type: 'carousel',
    startAt: 1,
    animationDuration: 500,
    paddings: '25%',
    swipeThreshold: false,
    afterInit: function (event) {
        coverflow(event.index, event.current);
    },
    afterTransition: function (event) {
        coverflow(event.index, event.current);
    }
});

.box {
  width: 100%;
  height: 60vh;
  border-radius: 12px;
}
.glide__wrapper {
  padding: 15vh 0;
}
.glide__track {
  overflow: visible;
  height: 60vh;
}
.glide__slide {
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.glide__slide.active {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}
.glide__slide.pre {
  -webkit-transform: perspective(50em) rotateY(15deg);
          transform: perspective(50em) rotateY(15deg);
}
.glide__slide.following {
  -webkit-transform: perspective(50em) rotateY(-15deg);
          transform: perspective(50em) rotateY(-15deg);
}
.glide--horizontal .glide__bullets {
  bottom: 25%;
}
body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

<html >
<head>
  <meta charset="UTF-8">
  <title>Coverflow carousel with Glide.js</title>
  
 <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/jedrzejchalubek/glidejs/8eabfbb9/dist/css/glide.core.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/jedrzejchalubek/glidejs/8eabfbb9/dist/css/glide.theme.min.css'>

 
   
</head>
 
<body>
   
<div class="glide" id="Glide">
  <div class="glide__arrows">
        <button class="glide__arrow prev" data-glide-dir="<">prev</button>
        <button class="glide__arrow next" data-glide-dir=">">next</button>
    </div>
  <div class="glide__wrapper">
    <ul class="glide__track">
      <li class="glide__slide">
        <div class="box" style="background-color: #77A7FB"><img>Srikanth</div>
      </li>
      <li class="glide__slide">
        <div class="box" style="background-color: #FBCB43"></div>
      </li>
      <li class="glide__slide">
        <div class="box" style="background-color: #34B67A"></div>
      </li>
      <li class="glide__slide">
        <div class="box" style="background-color: #95a5a6"></div>
      </li>
      <li class="glide__slide">
        <div class="box" style="background-color: #9b59b6"></div>
      </li>
    </ul>
  </div>
  <ul class="glide__bullets"></ul>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/jedrzejchalubek/glidejs/8eabfbb9/dist/glide.min.js'></script>
 

 
</body>
</html>

score 3 · Accepted Answer · answered Apr 25 '18 at 12:35

You are using Glide.js in ^2.0.0 version. Please refer to archived 2.0.0 docs.

Set a dragDistance option to false.

$('#Glide').glide({
    type: 'carousel',
    startAt: 1,
    animationDuration: 500,
    paddings: '25%',
    dragDistance: false,
    afterInit: function (event) {
        coverflow(event.index, event.current);
    },
    afterTransition: function (event) {
        coverflow(event.index, event.current);
    }
});

Side note: there are two options for controlling dragging:

dragDistance - controls mouse dragging
touchDistance - controls finger touch dragging

score 0 · Answer 2 · answered Apr 24 '18 at 12:56

0

From the docs, it looks like you need to mount the swipe function, then disable it.

import { Glide, Swipe } from '@glidejs/glide/dist/glide.modular.esm'

new Glide('.glide').mount({ Swipe })

Swipe.disable();

answered Apr 24 '18 at 12:56

andrewmenich

101
2

OP uses `^2.0.0` versions. This refers to `^3.0.0`, where jQuery dependency has been dropped. Additionally, it's better to don't import and mount and particular component if you don't need its functionalities. – Jędrzej Chałubek Apr 25 '18 at 12:37

score 0 · Answer 3 · answered Sep 13 '19 at 15:25

0

In my case I could not figure out how to turn off it normally, and also I'm absolute noob in ES Modules, so my solution was:

/* CSS */
.glide {
    pointer-events: none;
{
.glide button {
    pointer-events: auto;
}

answered Sep 13 '19 at 15:25

Dmitry Zakharov

205
3
6

although this seems like a nice solution. it has a flaw, the user will be able to swipe between slides using the button – Tristanisginger Feb 11 '20 at 11:13

score 0 · Answer 4 · answered Jan 10 '23 at 14:10

0

You may use touchAngle property to disable the dragging on the touch.

$('#glide').glide({
   touchAngle: 0
});

it is described here https://glidejs.com/docs/options/

answered Jan 10 '23 at 14:10

Tanzeel Saleem

802
10
16

Turn off dragging on Glide.js carousel

4 Answers4