使用Glide.js获取当前幻灯片索引
Glide.js是一个轻量级的响应式幻灯片插件，用于创建漂亮的滑动效果。它可以用于网站中的图片轮播、产品展示、新闻滚动等场景。
要获取当前幻灯片索引，可以使用Glide.js提供的API方法。首先，确保你已经引入了Glide.js库，并初始化了幻灯片组件。然后，可以使用index()方法来获取当前幻灯片的索引值。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="path/to/glide.css">
</head>
<body>
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">Slide 1</li>
<li class="glide__slide">Slide 2</li>
<li class="glide__slide">Slide 3</li>
</ul>
</div>
</div>
<script src="path/to/glide.js"></script>
<script>
new Glide('.glide').mount();
// 获取当前幻灯片索引
var glide = document.querySelector('.glide').glide;
var currentIndex = glide.index;
console.log("当前幻灯片索引：" + currentIndex);
</script>
</body>
</html>在上面的示例中，我们首先引入了Glide.js的CSS文件和JavaScript文件。然后，在HTML中创建了一个包含幻灯片内容的结构，并初始化了Glide.js组件。最后，通过glide.index属性获取当前幻灯片的索引，并将其打印到控制台。
推荐的腾讯云相关产品：腾讯云对象存储（COS）
- 产品介绍链接地址：腾讯云对象存储（COS）
腾讯云对象存储（COS）是一种安全、低成本、高可靠的云端存储服务，适用于存储大量非结构化数据，如图片、音视频、备份文件等。它具有高可用性、高扩展性和高性能，可以满足各种规模的存储需求。使用腾讯云对象存储（COS）可以方便地将幻灯片中的图片等资源上传到云端，并通过链接地址进行访问和展示。
相关·内容
2回答
如何用javascript检测<li>和<img>上的单击事件？
javascript、html、event-handling、carousel
我在我的glide.js项目上申请PHP+Javascript。我想这样做，以便当图像被点击时，页面将重定向到不同的页面。但我甚至无法捕捉到<li>或<img>标记上的单击事件。为什么会这样呢？
这是我的密码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"
浏览 3提问于2022-10-03得票数 -1
回答已采纳
1回答
每次点击2张幻灯片的Glide.js
javascript、css、glidejs
我有一个glide.js做的滑块。它运行良好，但我需要移动到索引2当我点击第二个滑翔子弹和索引4当我点击第三个。
我尝试过更改数据-glide-dir=“=1”by =2，而data-glide-dir="=2“改为"=4”，但它没有工作(当我单击Material时，类.glide_子弹-active会产生影响。
，有人知道我还能尝试什么吗？谢谢！
window.addEventListener('load', function(){
new Glide(document.getElementById('glider-2'), {
浏览 7提问于2021-08-09得票数 3
回答已采纳
1回答
仅在移动屏幕大小上使用glide.js旋转木马
javascript、mobile、carousel、conditional-breakpoint、glidejs
我正在使用Glide库作为旋转木马，我查看了文档，它运行良好。但是我想要实现的场景是，旋转木马不应该在桌面视图上工作，它应该只在移动视图上工作。
我已经尝试了下面的示例代码
var titles = document.querySelectorAll('h1')
var config = {
type:'carousel',
perView:1,
gap:0,
hoverpause:false,
autoplay: 3000,
animationDuration:1000
}
var glide = new Glide('.g
浏览 19提问于2022-01-31得票数 0
1回答
可以在vue组件中使用glidejs吗？
javascript、vue.js、glidejs
我想在vuejs组件中使用glidejs，尽管到目前为止我还不能让它工作。 有可能做到这一点吗？vuejs支持这样的东西吗？ 我的代码： <template>
<div>
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
浏览 38提问于2021-10-05得票数 1
回答已采纳
1回答
Glide.js没有响应
javascript、html、cordova、slider、glidejs
嗨，我目前正在科尔多瓦建立一个跨平台的应用程序，并承担了使用Glide.js的图像滑块的任务，我已经逐字遵循其文档，但无法理解为什么它不工作。出于某种原因，它会将每个图像显示在彼此的顶部。
<div id="Glide" class="glide">
<div class="glide__wrapper">
<ul class="glide__track">
<li class="glide__slide"><im
浏览 4提问于2016-03-17得票数 4
1回答
通过jQuery设置图像源时，glide.js中的最终图像不可见
javascript、html、jquery、glidejs
当为glide carousel创建幻灯片，并且我在HTML中分配源时，carousel按预期工作。 <div class="slide"><li class="glide__slide"><img src="images/resized/16.jpg" id="img1"></li></div>
<div class="slide"><li class="glide__slide"><img src=
浏览 17提问于2020-07-25得票数 0
1回答
无法在所有图像上设置相同的宽度和高度
javascript、css、glidejs
我使用javascript和Glider库制作了一个图像滑块，如下所示。
正如你可以在我的图像中看到的，第三张图像与前2没有对齐，并且有不同的高度。我的图像文件夹中的前两幅图像的宽度相同，为1920。第三个图像的宽度为1200 .Even，如果设置图像宽度和高度，结果是相同的。我已经敲了很长一段时间的头了，还没有找到解决办法。
我的容器、CSS和幻灯片库中单个元素的代码
.card__header img{
max-width:100%;
}
.new__card {
background-color: var(--pri
浏览 1提问于2021-01-29得票数 0
回答已采纳
1回答
如何使自动滑翔旋转木马在活动时改变背景图像
javascript、typescript
我的问题有三部分。如果能对这个JS问题的任何部分提供任何帮助，我们将不胜感激。我试图通过尝试和错误来学习和理解JS。
我创建了这个漂亮的旅行登陆页面，有一个缩略图旋转木马，它使用了Glide.js，它非常酷，工作也很好。旋转木马向左移动，并有箭头按钮手动控制幻灯片。
但是我一直在尝试实现一个普通的JS旋转木马滑块，但我不幸地失败了。一直挣扎了两天，我能达到的最好是得到一个旋转木马项目左右移动。见。
我想要的是让旋转木马自动滑动，用箭头按钮手动控制滑块。
我的目标是使用querySelectorAll('.carousel-items')的所有旋转木马项目，并将left
浏览 3提问于2020-09-27得票数 2
回答已采纳
2回答
如何调试用ES6编写的模态插件的源代码？
javascript、ecmascript-6、webpack-4
我正在尝试编辑/理解一个用ES6编写的模态插件的源代码，链接。
<div aria-hidden="true" class="modal micromodal-slide" id="modal-1">
<div class="modal__overlay" data-micromodal-close="" tabindex="-1">
<div aria-labelledby="modal-1-title" class="
浏览 0提问于2018-10-07得票数 11
回答已采纳
1回答
Glide.js api问题
javascript、jquery、html、css、slider
我正在创建一个滑块使用Glide.js插件。我做了所有事情，就像文档里说的那样。在html中，我有：
<div class="slider" id="paintSlider">
<ul class="slides">
<li class="slide paint">
<span><img src="img/glowna_tlo.jpg" alt=""&
浏览 3提问于2014-09-08得票数 1
回答已采纳
3回答
关闭Glide.js旋转木马上的拖动
javascript、glidejs
我想通过拖动来关闭改变幻灯片，并使用'prev‘- 'next’按钮循环幻灯片。我设置了swipeThreshold: false，正如文档中所说的那样。但我仍然可以拖动幻灯片，因为您可以在下面的代码中查看。如何禁用幻灯片拖动？
function coverflow(i, el) {
el.removeClass('pre following')
.nextAll()
.removeClass('pre following')
.addClass('followi
浏览 2提问于2018-04-24得票数 0
回答已采纳
3回答
循环遍历项和设置间隔后从所有项中删除类，同时将类添加到下一项。
javascript、jquery
我已经建立了一个简单的旋转木马，它褪色了各种图像。当JS更改类时，CSS中会发生可视的更改。
这与两张幻灯片非常吻合。现在，我已经介绍了第三个，它没有，我现在可以理解为什么它工作与2，而不是3或更多。
基本上，我想要实现的是：
该脚本每7秒删除slide--active的所有实例，并将其添加到循环中的下一项。
我在整个站点中都使用Jquery，所以使用Jquery是有意义的。下面的CSS可以忽略，我只对类的更改感兴趣。
$('.slides').each(function(i, item) {
setInterval(
function() {
浏览 4提问于2022-06-16得票数 0
回答已采纳
1回答
Glide.js //未定义幻灯片
javascript、glidejs
所以我一直在尝试让glide.js参与我的项目。按照官方文档中的说明执行了所有步骤，但是一旦我在web控制台中使用new Glide(".glide").mount(); (就像文档中所说的那样)启动了滑动器，我就会得到
Uncaught ReferenceError: Glide is not defined
下面是相关的HTML：
<head>
<link
rel="stylesheet"
href="node_modules/@glidejs/glide/dist/css/glide.core.min.css"
/
浏览 0提问于2021-04-13得票数 0
1回答
在localStorage中存储多个选项以进行测验
local-storage
我正在尝试为一个使用本地存储的ipad应用程序创建一个测验。我已经成功地创建了一个测验，它可以记住你点击的选项，并且我可以检查答案是否正确。
但是，对于某些问题，有多个答案，我希望能够将多个答案存储为该问题的数组。
我的测验当前将答案存储在一个键下，该键由父div的类命名。答案取决于你点击的是哪个LI。请看下面我的代码。
我喜欢每个问题可以存储多个答案的选项，基于我拥有的代码，我该如何做到这一点？我对javascript还是个新手。
<!DOCTYPE HTML>
<html>
<head>
<meta charset=
浏览 0提问于2013-02-14得票数 0
回答已采纳
1回答
幻灯片活动时JQuery addClass转到缩略图
javascript、jquery、backbone.js
我正在从头开始构建滑块功能。我有一个幻灯片列表，当前的幻灯片有一类“活动幻灯片”。
<ul class="slides">
<li class ="active-slide"></li>
<li></li>
<li></li>
<li></li>
</ul>
然后我有一个相应的缩略图列表，当你点击它们时，滑块会显示相应的幻灯片。
<ul class="thumbnails">
<
浏览 1提问于2014-10-17得票数 0
回答已采纳
2回答
简单的Javascript滑动功能不起作用
javascript、jquery、html
我是Javascript的新手，我正在尝试用图片做一个简单的“幻灯片”。这是我的代码，put它不工作，它正常加载html代码，忽略‘隐藏’功能:怎么办？
<script type="text/javascript">
$(function() {
var tot = $(".slide").length,
current = 1
$(".slide").not(":first").hide()
$
浏览 3提问于2012-05-25得票数 0
1回答
在最后一张幻灯片上隐藏/禁用“下一步”按钮，在第一张幻灯片上禁用“Prev”按钮
javascript、jquery、html、css、button
我在网上找到了一个脚本，并使用它为我的网站上的图片制作了“灯光盒”和“幻灯片”。问题是它没有在最后一张幻灯片上禁用next按钮和在第一张幻灯片上禁用prev按钮的选项。所以我在这里张贴代码。
我的画廊包括几个部分，代表专辑(学校项目，个人项目，等等)。我用JS编写了这个脚本:当您单击某个节名时，它隐藏了一个部分，并显示了另一个部分。当我列出图像时，它从一个部分中的最后一个图像跳转到下一个部分的第一个图像。
因此，我不仅需要帮助处理最后和第一个图像上的next和prev按钮，而且还需要脚本来识别一个部分中的图像数量，并在该部分的最后一个幻灯片上隐藏next按钮(也用于prev按钮)。记住，我是J
浏览 0提问于2018-03-06得票数 1
回答已采纳
2回答
用多个滑块获得电流和总滑块
jquery、fullpage.js
我使用fullpage.js有多个水平滑块。基本上，你可以滚动到每一个滑块，然后滑动水平在每一节。我想要做的是显示当前幻灯片/幻灯片的每个部分。我遇到的问题是，因为它们都有相同的类，所以它得到的是整个页面的总数，而不是每个部分的总数，而且当前的幻灯片在从所有幻灯片中获得“活动”类后不会改变。
HTML
<div class="section" id="section1" >
<div class="slide" id="golf1"></div>
浏览 2提问于2014-12-08得票数 1
回答已采纳
2回答
嵌套的jQuery循环幻灯片:为什么我的缩略图导航中断了？
jquery、nested、fancybox、cycle
这是。
我已经创建了一个项目组合，使用FancyBox启动一个包含嵌套循环幻灯片的lightbox。缩略图导航在第一张幻灯片上运行良好，但当您单击指向第二张幻灯片的链接(儿童英雄)时，它会断开。HTML是相同的，所以我不确定这里发生了什么。我已经修改了三次，寻找补救措施，但很难找到许多带有缩略图导航的嵌套循环幻灯片示例。我在Stack Overflow上找到了一个不同问题的解决方案，所以我认为这是一个寻求帮助的好地方。
你知道这里出了什么问题吗？
下面是我的javascript：
<!-- Lightbox Javascript -->
<script type="t
浏览 0提问于2011-07-22得票数 0
1回答
在angular [Ionic]中的两个HTML元素之间传递值
javascript、angularjs、ionic-framework
我正在使用离子滑动盒，我迭代了许多图像，并在滑动框中显示它们。
<ion-slide-box>
<!-- Iterate n number of times, where n is the number of images -->
<ion-slide ng-repeat="n in [].constructor(imageCount) track by $index">
<img ng-src="MyImage-{{$index + 1}}.png" width="100%" height=
浏览 9提问于2016-09-07得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
