0

刷卡器版本：6.2.0

盖茨比版本：2.24.65

你做了什么

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

现场直播

编码

import React, { useState } from "react"
import SwiperCore, { Thumbs, Zoom } from "swiper"
import { Swiper, SwiperSlide } from "swiper/react"
import "swiper/swiper-bundle.min.css"
import "lazysizes"
import "lazysizes/plugins/parent-fit/ls.parent-fit"
import Lightbox from "./lightbox"

SwiperCore.use([Thumbs, Zoom])

const Carousel = ({ images }) => {
  const [thumbsSwiper, setThumbsSwiper] = useState(null)
  return (
    <div>
      <Swiper
        thumbs={{ swiper: thumbsSwiper }}
        className=""
        autoHeight={true}
        slidesPerView={1}
      >
        {images.map(slide => (
          <SwiperSlide key={slide.src} zoom={true}>
            <Lightbox image={slide.image.fluid.src}>
              <img
                src={`${slide.image.fluid.base64}`}
                data-srcset={`${slide.image.fluid.srcSet}`}
                data-sizes="auto"
                className="lazyload carousel-image block object-cover w-full"
                alt={`${slide.image.url}`}
              />
            </Lightbox>
          </SwiperSlide>
        ))}
      </Swiper>

      <Swiper onSwiper={setThumbsSwiper} spaceBetween={2} slidesPerView={3}>
        {images.map(slide => (
          <SwiperSlide key={slide.src} className="">
            <img
              src={`${slide.image.fluid.base64}`}
              data-srcset={`${slide.image.fluid.srcSet}`}
              data-sizes="auto"
              className="lazyload object-cover w-full h-20 p-1 mt-1 rounded-lg opacity-75"
              alt={`${slide.image.url}`}
            />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  )
}
export default Carousel

CSS

.swiper-slide-thumb-active img { opacity: 1 !important; border-bottom: 3px solid #3ebd93; }

预期行为

正确显示活动幻灯片。意味着只有活动幻灯片应该有绿色边框底部

实际行为

嗯，真的很随意。这是一个显示行为的 GIF

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

4

1 回答 1

0

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

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

于 2021-03-25T15:17:12.057 回答