使用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）可以方便地将幻灯片中的图片等资源上传到云端，并通过链接地址进行访问和展示。
相关·内容
1回答
当我使用GLide.js在元素之间滑动时，如何获得当前幻灯片索引/编号 type: "carousel", startAt
浏览 2提问于2020-06-03得票数 1
回答已采纳
7回答
嗨，当我单击GLide.js 中的“下一步”和“上一页”按钮时，如何才能得到当前的幻灯片“否”。
浏览 8提问于2016-03-07得票数 3
回答已采纳
1回答
背景：我正在尝试使用glide.js API函数.refresh()，但是当我应用它时，我会得到一条"TypeError: TypeError: glid
浏览 6提问于2015-09-18得票数 2
我正在使用ASP.NET MVC3和jQuery Cycle插件进行图像画廊项目。size=large" title="006" alt="22" />问题:我想把幻灯片上当前照片的Id (int)从上面的img url传递给一个控制器操作，这样我就可以在运行时异步显示数据库中的相关信息
浏览 0提问于2012-06-04得票数 0
回答已采纳
当我使用Slick时，我正在尝试瞄准.slick-current两边的两张幻灯片。通过CSS或JavaScript/jQuery。有没有办法在这两张幻灯片中添加一个类？在上，当幻灯片2被激活时，我想选择幻灯片1和3。
浏览 2提问于2018-06-08得票数 0
1回答
我使用的是Slick Slider jquery插件。要做到这一点。我正在尝试保持当前幻灯片的位置，以便将translate3d设置为0px。但是这个滑块被挡住了。
浏览 68提问于2018-06-09得票数 1
我在我的一个项目中使用滑块。是否有方法获取当前可见的幻灯片的索引/编号？我需要显示类似-幻灯片2的10，并相应地改变数字时，幻灯片被改变。
在文档中没有找到这样的选项。
浏览 11提问于2013-11-03得票数 1
回答已采纳
2回答
我有一个来自JSON feed的图片幻灯片。图像具有来自提要的alt属性，但我希望在图像上显示alt的值。这不起作用，因为它只显示第一张图像中的第一个alt。
我怎么发动汽车呢？
浏览 2提问于2011-11-10得票数 1
我使用iframe将来自SharePoint在线文档库的PowerPoint文档嵌入到我的html页面中。是否可以使用Office JavaScript API找到文档的当前幻灯片和最后一张幻灯片。
浏览 20提问于2019-03-13得票数 0
我对使用ionic-cordova-angular的混合移动有疑问。这个问题是关于离子滑动盒没有按钮的问题。我尝试获取当前索引时，用户快速页面在滑动框。如何在没有创建下一张幻灯片的情况下获得当前索引。
浏览 0提问于2015-03-19得票数 1
回答已采纳
如果视区在一个范围内，我必须将幻灯片宽度设置为特定的大小。整个界面都是响应式的，所以即使slideWidth在幕后工作，幻灯片的宽度也会发生变化。
我也尝试过使用纯CSS，但Glide负责处理，并在发生调整大小事件时进行覆盖。我也试过使用纯JS并亲自测量视口，但还是由Glide.js负责，界面被偏移了，所以幻灯片移动了一点，与屏幕不匹配。
浏览 2提问于2019-08-13得票数 2
1回答
$source.length找到了全部幻灯片，尽管不是很理想，因为我相信这可能会因实例化羽毛光的HTML而有所不同，为了我自己的使用，我必须在计算之前遍历源到适当的级别
所以现在我不确定找到current，那么，最后一个问题是，是否有更好的方法来找到总幻灯片数量？
浏览 0提问于2015-06-09得票数 1
1回答
同步两个角ui引导传送带
、、、、
我试图创建两个同步传送带在一个页面使用角ui引导。我试着设置变量一样的。对于两个同样的旋转木马。但过了一段时间他们就不同步了。
浏览 1提问于2014-12-23得票数 0
回答已采纳
1回答
Cycle2滑块的事件侦听器
、、、、
我使用的是一个名为cycle2 ()的jQuery插件，当某个幻灯片处于活动状态时，我希望以不同的元素为目标。function che
浏览 5提问于2015-05-07得票数 0
我试图实现的是一个基本的幻灯片放映，开始，到达最后一张幻灯片，然后停止。我使用的是Glide.js，因为它很小，而且真的很棒，但是，使用下面的代码，它实际上不会暂停，幻灯片又回到了开始的地方。glide.pause(); });
} 我正在取出console.log，它告诉我5 5，这意味着我在第5张幻灯片上的
浏览 21提问于2021-04-02得票数 1
回答已采纳
2回答
我要从滑块中获取当前图像源。当它的幻灯片时，必须在文本框中捕获该图像源，但它只获取第一个图像src，而不是随后的图像。我正在使用pgwSlideshow插件..。
浏览 1提问于2017-02-13得票数 2
回答已采纳
如何在react-owl-carousel中选择当前项。我确实用来在翻译的事件期间获取id，也尝试了官方文档中的所有事件。Jquery:如何获取信息： (就像在Jquery中一样)我不能从这里得到任何响应。/div> </OwlCarousel>我的活动是当用户更改幻灯片项目时，索引不会更改如何获取<
浏览 38提问于2018-02-03得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
