Swiper V7 React，很多参数不起作用答案

【问题标题】：Swiper V7 React, lots of parameters not workingSwiper V7 React，很多参数不起作用
【发布时间】：2022-01-06 13:15:51
【问题描述】：

以下是我的代码：

我正在尝试浏览 Swiper 库的文档。

import React from "react";

// Direct React component imports
import { Swiper, SwiperSlide } from "swiper/react/swiper-react.js";
// Core modules imports are same as usual
import { Navigation, Pagination, Scrollbar, EffectFade, Lazy } from "swiper";

// Styles must use direct files imports
import "swiper/swiper-bundle.css"; // core Swiper
import "swiper/modules/navigation/navigation.min.css"; // Navigation module
import "swiper/modules/pagination/pagination.min.css"; // Pagination module
import "swiper/modules/scrollbar/scrollbar.min.css"; // Pagination module
import "swiper/modules/effect-fade/effect-fade.min.css";
import "swiper/modules/lazy/lazy.min.css";

export default function Scratchpad() {
  return (
    <Swiper
      modules={[Navigation, Pagination, Scrollbar, EffectFade, Lazy]}
      spaceBetween={10}
      slidesPerView={1}
      centeredSlides={"true"}
      direction={"vertical"}
      navigation
      effect="fade"
      // lazy
      // scrollbar={{ draggable: true }}
      pagination={{ clickable: true }}
      onSlideChange={() => console.log("slide change")}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>
        <img src={`https://picsum.photos/seed/${Math.random()}/200`} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={`https://picsum.photos/seed/${Math.random()}/200`} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={`https://picsum.photos/seed/${Math.random()}/200`} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={`https://picsum.photos/seed/${Math.random()}/200`} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={`https://picsum.photos/seed/${Math.random()}/200`} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={`https://picsum.photos/seed/${Math.random()}/200`} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={`https://picsum.photos/seed/${Math.random()}/200`} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={`https://picsum.photos/seed/${Math.random()}/200`} alt="" />
      </SwiperSlide>
    </Swiper>
  );
}

有些元素有效，有些则无效。

淡出作品分页作品滚动条没有方向没有

有人知道为什么吗？我尝试了各种导入方法并浏览了文档，但无法理解为什么有些东西有效而另一些无效，即使以完全相同的方式实现也是如此。

【问题讨论】：

标签： javascript reactjs create-react-app swiper

【解决方案1】：

在这里回答我自己的问题：

所以看起来与看起来有一定尺寸的容器有很大关系。

这很难在文档中找到，我还在寻找? 在这里找到了一些东西：https://github.com/nolimits4web/swiper/issues/3691

似乎如果您将容器大小设置为固定高度，它将起作用。

【讨论】：