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

Posted 2023-05-08

【中文标题】Swiper V7 React，很多参数不起作用

【英文标题】：Swiper V7 React, lots of parameters not working

【发布时间】：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`  />
      </SwiperSlide>
      <SwiperSlide>
        <img src=`https://picsum.photos/seed/$Math.random()/200`  />
      </SwiperSlide>
      <SwiperSlide>
        <img src=`https://picsum.photos/seed/$Math.random()/200`  />
      </SwiperSlide>
      <SwiperSlide>
        <img src=`https://picsum.photos/seed/$Math.random()/200`  />
      </SwiperSlide>
      <SwiperSlide>
        <img src=`https://picsum.photos/seed/$Math.random()/200`  />
      </SwiperSlide>
      <SwiperSlide>
        <img src=`https://picsum.photos/seed/$Math.random()/200`  />
      </SwiperSlide>
      <SwiperSlide>
        <img src=`https://picsum.photos/seed/$Math.random()/200`  />
      </SwiperSlide>
      <SwiperSlide>
        <img src=`https://picsum.photos/seed/$Math.random()/200`  />
      </SwiperSlide>
    </Swiper>
  );

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

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

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

【参考方案1】：

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

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

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

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