Swiper React прокрутка колесика мыши и управление с клавиатуры не работают

Использование колеса мыши или клавиатуры для управления скольжением в SwiperJs for React не работает. Кажется, я ничего не могу найти на нем, и следование документации Swiper API тоже не помогает.

Использование реакции: 17.0.1 swiper: 6.4.11

Там есть настройка песочницы здесь

const App = () => {
  const slides = [1, 2, 3, 4];

  return (
    <Swiper
      slidesPerView={2}
      keyboard={{ enabled: true }}
      direction="vertical"
      mousewheel
    >
      {slides.map((slide) => (
        <SwiperSlide key={slide}>
          <h1>Slide</h1>
        </SwiperSlide>
      ))}
    </Swiper>
  );
};


reactjs swiper swiperjs
person Luke Inderwick    schedule 14.02.2021    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Пожалуйста, получите модуль SwiperCore для выполнения следующих действий:

import SwiperCore, { Keyboard } from 'swiper';

и добавьте следующую строку кода:

SwiperCore.use([Keyboard]);

Это должно заставить работать клавиатуру.

person Gauri Gattani    schedule 27.05.2021

arrow_upward
0
arrow_downward

Не подходящее решение, но для всех, кого это интересует, я придумал обходной путь.

Мне не удалось заставить колесо мыши или элементы управления на клавиатуре работать для Swiper с использованием компонентов React или чистого javascript. Официальные примеры Swiper не работали при репликации, поэтому я попробовал несколько предыдущих версий. Вернулся к 5.4.5, чтобы заставить его работать.

К сожалению, 5.4.5 не поддерживает React, но Swiper все еще может быть включен в настройку React.

// import Swiper JS
import Swiper from "swiper/js/swiper";
// import Swiper styles
import "swiper/css/swiper.css";

const SimpleSwiper = () => {
  useEffect(() => {
    const swiper = new Swiper(".swiper-container", {
      direction: "vertical",
      mousewheel: true,
      keyboard: { enabled: true },
      slidesPerView: 1,
    });
  }, []);

  const slides = [1, 2, 3];

  return (
    <div className="swiper-container">
      <div className="swiper-wrapper">
        {slides.map((slide) => (
          <div
            className="swiper-slide"
            key={slide}
          >{`slide ${slide}`}</div>
        ))}
      </div>
    </div>
  );
};

Вы можете просмотреть тестовую среду кода здесь. Управление с клавиатуры здесь не работает, но работает локально.

person Luke Inderwick    schedule 14.02.2021