个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
36
4
我想知道在 Swiper JS 中是否有设置单个幻灯片持续时间/延迟的选项盒子外面。我在文档、github 问题中进行了搜索，但找不到任何相关内容。
如果开箱即用，谁能展示如何通过破解核心或自定义代码来实现这一目标。
谢谢。
最佳答案
data-swiper-autoplay 属性:
https://swiperjs.com/swiper-api#param-autoplay
Delay between transitions (in ms). If this parameter is not specified,auto play will be disabled
If you need to specify different delay for specific slides you can doit by using data-swiper-autoplay (in ms) attribute on slide:
<!-- hold this slide for 2 seconds -->
<div class="swiper-slide" data-swiper-autoplay="2000">
例子:
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
}<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper@7.0.1/swiper-bundle.min.css">
</head>
<body>
<!-- Swiper -->
<h1>Swiper 7 data-swiper-autoplay</h1>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" data-swiper-autoplay="3000">3 seconds</div>
<div class="swiper-slide" data-swiper-autoplay="4000">4 seconds</div>
<div class="swiper-slide" data-swiper-autoplay="5000">5 seconds</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper@7.0.1/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper', {
initialSlide: 1,
slidesPerView: 1,
spaceBetween: 20,
autoplay: {
delay: 2000,
},
centeredSlides: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>关于swiper.js - SwiperJS : Custom speed/delay for each slide?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60438838/
36
4
0
我正在使用 SwiperJS (www.swiperjs.com)，我遇到了一个问题，滑动到下一张照片可以正常工作，但上一个和下一个按钮不起作用。我查看了在这里可以找到的每篇文章并遵循了他们的文档，但
我的问题是无法看到 SwiperJS 导航。在文档中写道: navigation 的 nextEl 是带有 CSS 选择器的 String 或元素的 HTML 元素，单击它后将像“下一步”按钮一样工作
在我的 ReactJS 应用程序中使用 SwiperJS。我已经导入了默认样式包，但不知道如何设置分页容器或项目符号的样式。 在 pagination:参数内... 每次我更改el: 参数，分页就消失
我在包含混合幻灯片内容的 NextJS 项目中使用 SwiperJS。我在使用 react-youtube 组件时遇到双重声音问题。 我的滑动器配置使用 loop:true，但我发现这是导致双音的原因
我在 React 中使用这个 swiper: https://swiperjs.com/react/ 我试图让它“自动播放”，但它不会自动滑动。 这是我尝试过的: // https://swiperj
我已经将 SwiperJS 安装到我的 NextJS 项目中。我完全遵循了 Swiper 教程文档，但是当我尝试为 .swiper、.swiper-slide 这样的类设置样式时出现问题......样
我已经将 SwiperJS 安装到我的 NextJS 项目中。我完全遵循了 Swiper 教程文档，但是当我尝试为 .swiper、.swiper-slide 这样的类设置样式时出现问题......样
swiper 的循环设置有一些问题。问题是它在进入第二个循环之前停止滑动，它总是在某个点停止。以前从未使用过 swiper，我不确定这是否有意为之？或者是否有可能的修复方法。 如果向下滑动，您可以在
我正在使用 swiperjs ，以及保留在窗口中上一个 slider 的一部分，但不使当前 slider 居中的内容 我尝试了spaceBetween、centeredSlides 和 slidesO
我知道有一个模块，但我想通过其 CDN 在我的 Angular 应用程序中使用 Swiper js。 我已将脚本包含在 index.html 的 head 中。 然后在我想使用它的组件中，我将其声明为
我正在尝试在我的 Browserify 包中使用 SwiperJS 的 jQuery 插件...但是出现以下错误: Uncaught TypeError: $(...).swiper is not a
我想阻止 slideNext 除非有特定的 Action (JS 确认 - 点击 Yes 按钮).. swiperV.on('onSlideNextEnd', function () { swiper
我正在尝试在我的项目中的 Typescript 文件中使用 Swiperjs。我想从另一个组件更改事件幻灯片(选项卡，来自 Material UI，已经就位)。我可以直接在 Swiper 组件中滑动，
Swiper 版本:5.3。 我想知道在 Swiper JS 中是否有设置单个幻灯片持续时间/延迟的选项盒子外面。我在文档、github 问题中进行了搜索，但找不到任何相关内容。 如果开箱即用，谁能展
我将 Swiper 与 angular 5 一起使用，但是如果我设置 slidesPerView: 'auto'，幻灯片将无法工作(无法看到所有 slider ), 事件我设置了 loopedSlid
我不是 CSS 专家。我希望 swiperjs slider 中的所有卡片都具有相同的高度，无论卡片中的内容是什么。目前，一些卡片的内容是不同的高度。我的代码看起来像这张图片，下面是我的示例代码。如何
我正在使用 vue-awesome-swiper 并按照此处的步骤操作:https://github.com/surmon-china/vue-awesome-swiper .我选择在 Nuxt js
我是一名优秀的程序员,十分优秀！