如何解决Swiper 分页,触发特定幻灯片上的 js 代码
我使用 SwiperJS 作为滑块。 我想知道是否可以在 Swiper 中的特定幻灯片上设置触发 js 代码?
例如,如果用户在第二张幻灯片背景改变,则触发JS代码getElementById("body");element.classList.add("some-class");
这也适用于箭头,所以问题应该是,
解决方法
开箱即用的 SwipeJS 带有 a bunch of events。
您可以在 return view('livewire.admin-dashboard')->layout('layouts.base');
事件后选中 swiper.realIndex
以仅在特定幻灯片上触发某些内容。
slideChange
const swiper = new Swiper('.swiper-container',{
// If we need pagination
pagination: {
el: '.swiper-pagination',},// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',});
// Do something on slide #2 (note that index starts from 0)
swiper.on('slideChange',(sw) => {
if (sw.realIndex === 1) {
console.log(`Message seen only after changing to slide #${swiper.realIndex + 1}`);
}
});
.slide {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
}
.slide-1 {
background-color: lightgreen;
}
.slide-2 {
background-color: pink;
}
.slide-3 {
background-color: lightblue;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。