Блог

Версия Swiper: 6.2.0

Версия Gatsby: 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 слайдов.

У меня была аналогичная проблема. Вместо того, чтобы стилизовать изображение, оберните изображение другим элементом и перенесите на него свои стили.

Похоже, что SwiperJS, похоже, не использует поля, границы и отступы при вычислении ширины слайда. Я не совсем уверен, как перенос изображения разрешает его, но это то, что сработало для меня.