小编hj.*_*ul7的帖子

滑动图像高度不一样

似乎无法弄清楚这一点,试图强制所有图像幻灯片具有统一的高度。但有些图像比其他图像更小/更大。我假设这是我无法弄清楚的 CSS 问题。有人帮忙吗?

代码:

 <Swiper
            slidesPerView={1}
            spaceBetween={10}
            navigation={{
              prevEl: ".swiper-previous-button",
              clickable: true,
              nextEl: ".swiper-next-button",
            }}
            breakpoints={{
              640: {
                slidesPerView: 2,
                spaceBetween: 20,
              },
              768: {
                slidesPerView: 4,
                spaceBetween: 40,
              },
              1024: {
                slidesPerView: 5,
                spaceBetween: 50,
              },
            }}
            modules={[Navigation]}
            className="mySwiper"
          >
            {latestMovies?.map((movie) => (
              <SwiperSlide key={movie.Id}>
                  <img
                    key={movie.Id}
                    src={
                      movie?.ImageTags.Primary
                        ? `http://localhost:8096/Items/${movie.Id}/Images/Primary`
                        : `http://localhost:8096/Items/${movie.Id}/Images/Backdrop`
                    }
                    alt={movie.Name}
                  />
              </SwiperSlide>
            ))}
          </Swiper>
Run Code Online (Sandbox Code Playgroud)

和CSS:

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: …
Run Code Online (Sandbox Code Playgroud)

css reactjs swiper.js

2
推荐指数
1
解决办法
5521
查看次数

标签 统计

css ×1

reactjs ×1

swiper.js ×1