[Swiper] [Gatsby]当有3张或更多幻灯片时,缩略图滑块具有多个活动幻灯片

时间:2020-09-24 17:50:04

标签: reactjs gatsby thumbnails swiper swiperjs

滑动版本:6.2.0

盖茨比版本:2.24.65

您所做的

想在活动缩略图幻灯片中添加一些CSS。

Live Site

代码

.x

CSS

log

预期行为

正确显示活动幻灯片。表示仅活动幻灯片应具有绿色边框底部

实际行为

嗯,这真的是随机的。这是a GIF showing the behaviour

仅发生在其中包含2张以上幻灯片的滑块上。

1 个答案:

答案 0 :(得分:0)

我遇到了类似的问题。不要为图像设置样式,而是用另一个元素包裹图像并将您的样式移动到它。

似乎 SwiperJS 在其幻灯片宽度计算中似乎没有使用边距、边框和填充。我不确定包装图像如何解决它,但这对我有用。