我想通过拖动关闭更改幻灯片,然后使用' prev'来循环播放幻灯片。 - ' next'纽扣。我设置swipeThreshold: false
,如文档https://glidejs.com/docs/options/中所述。但我仍然可以拖动幻灯片,您可以在下面的代码中找到。如何禁用幻灯片拖动?
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>
&#13;
答案 0 :(得分:2)
您正在^2.0.0
版本中使用Glide.js。请参阅已归档的2.0.0 docs。
将dragDistance
选项设为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);
}
});
附注:控制拖动有两个选项:
dragDistance
- 控制鼠标拖动touchDistance
- 控制手指触摸拖动答案 1 :(得分:0)
从文档中,您似乎需要安装滑动功能,然后禁用它。
import { Glide, Swipe } from '@glidejs/glide/dist/glide.modular.esm'
new Glide('.glide').mount({ Swipe })
Swipe.disable();
答案 2 :(得分:0)
就我而言,我不知道如何正常关闭它,而且我在ES Modules中绝对是菜鸟,所以我的解决方案是:
/* CSS */
.glide {
pointer-events: none;
{
.glide button {
pointer-events: auto;
}