标签: react-swiper

Swiper 7.0.5 swiper/css 给出错误模块未找到：无法解析“swiper/css”

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
function Test() {
 return (
  <Swiper
  spaceBetween={50}
  slidesPerView={3}
  onSlideChange={() => console.log('slide change')}
  onSwiper={(swiper) => console.log(swiper)}
>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
  <SwiperSlide>Slide 4</SwiperSlide>
  ...
</Swiper>
);
}

 export default Test;

我有一个纸牌游戏，玩家从一副牌中选择一张牌添加到第二副牌中。按下活动卡上的按钮会将其移动到另一副牌上，然后将其激活。当焦点对准时，活动的牌组应该更大，而非活动的牌组则最小化，如下所示：

我已经在 SwiperJS 和 React-Swiper 中使用 Swiper Coverflow 效果实现了它，但无论哪种情况，高度都与 CSS 类相关.swiper-slide。此类的宽度设置为固定大小，该大小决定了 Swiper 其余部分的渲染方式。似乎更改幻灯片宽度（以及由此产生的 Swiper 高度）的唯一方法是根据状态将固定宽度类应用于幻灯片。

JSX：

 <SwiperSlide
            key={index}
            className={
              props.selected
                ? "swiper-fixed-width-300 "
                : "swiper-fixed-width-100 "
            }
          >

CSS：

.swiper-fixed-width-100 {
  width: 100px;
}

.swiper-fixed-width-300 {
  width: 300px;
}

然而，这种方法没有像其他交互那样的缓动或过渡，所以感觉太突然了。我想找到一种使用 Swiper API 函数来完成相同操作的方法。如何使用 API 或不操作 CSS 类来实现相同的交互？

沙盒示例

我将 SwiperJS 与 React 结合使用，并且尝试实现一种布局，其中一张幻灯片始终位于屏幕中心，下一张幻灯片的一部分填充右侧的所有剩余空间。

Swiper 文档显示我可以指定每个断点处的幻灯片数量，但我正在努力使下一个图像填充我设置幻灯片PerView 的这些断点之间的剩余空间。

我该如何实施呢？

因此，我根据朋友的推荐使用 Swiper.js 来创建自动滚动滑块。但我不知道如何使幻灯片之间的过渡平滑。目前，当我更改自动播放毫秒时，它只会更改更改幻灯片所需的时间。

这是我的代码：

import React from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

import ReviewCard from "../Review/ReviewCard";
import ReviewCard2 from "../Review/ReviewCard2";

// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

import "swiper/css";

// import required modules
import { Autoplay } from "swiper";

export default function App() {
  return (
    <>
      <Swiper
        slidesPerView={8}
        spaceBetween={30}
        slidesPerGroup={1}
        autoplay={{
          delay: 5500,
          disableOnInteraction: false,
        }}
        loop={true}
        loopFillGroupWithBlank={true}
        breakpoints={{
          // when window width is >= 320px
          320: { …

我想让我的 Swiper Slider 在 React.js 中响应式我正在使用 Swiper React 组件，而且我对此很陌生。我在 css 的媒体查询中添加了相同的宽度，并为组件上的断点添加了相同的宽度。但仍然存在问题，它没有响应并在右侧添加了一些空间。

576px 断点上方看起来像这样

768px 断点上方看起来像这样

我很感激任何帮助。

滑块组件：

import React from "react";
import { Navigation, Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "./mainslider.css";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";

const MainSlider = () => {
  return (
    <Swiper
      // install Swiper modules
      breakpoints={{
        576: {
          width: 576,
          slidesPerView: 2,
        },
        768: {
          width: 768,
          slidesPerView: 1,
        },
      }}
      modules={[Navigation, Pagination]}
      spaceBetween={0}
      slidesPerView={1}
      navigation
      // …

如何在 React js 中在容器外部制作 swiper nav？

到

我正在使用反应打字稿。当我设置thumbs={{ swiper: thumbsSwiper }}滑动滑块组件时，它给我一个错误Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'addClass')。我怎样才能解决它？如果我在 js 文件中使用以下代码，它不会给我任何错误，但一旦我在 TSX 文件上使用它，就会出现错误。

const [thumbsSwiper, setThumbsSwiper] = useState<any>(null); // Thumbs state

<div key={product._id} className='lg:w-1/2'>
        <Swiper

            loop={true}
            spaceBetween={10}
            thumbs={{ swiper: thumbsSwiper }} // PRoblem is Here
            modules={[FreeMode, Navigation, Thumbs]}
            className="mySwiper2"
        >
            {product?.images.map(({ src }: { src: string }) => {
                return <SwiperSlide style={{ height: '500px', width: '300px' }}>
                    <img src={src} alt={product?.title} />
                </SwiperSlide>

            })}
        </Swiper>
        <Swiper
            onSwiper={setThumbsSwiper}
            loop={true}
            spaceBetween={10}
            slidesPerView={4}
            freeMode={true}
            watchSlidesProgress={true} …

我想将滑动器的活动幻灯片的索引设置到中心位置？ 正如你在图片中看到的，活动索引设置为 0，我希望它是数字 3，即：中间，它应该保持中间

 <Swiper
      grabCursor={true}
      spaceBetween={10}
      modules={[Navigation, Thumbs]}
      slidesPerView={7}
    //  activeSlideKey={3}
      slideActiveClass={styles.activeSlider}
    >
      {options.map((option) => () => <SwiperSlide key={option}>{option}</SwiperSlide>)}
    </Swiper>

activeSlideKey仅供参考。这是行不通的。