Question

我试图在使用react.js时创建带有react-id-swiper的鼠标滚轮控制垂直滑动器，但是它不起作用没有错误，没有样式设置，只是显示了放置在div中的文本。任何人都可以帮助解决问题。

我只是编写这段代码，并包含库中的CSS。

import React from "react";
import Swiper from "react-id-swiper";
import "react-id-swiper/lib/styles/scss/swiper.scss";

class Example extends React.Component {
  render() {
    const params = {
      container: ".container",
      pagination: ".swiper-pagination",
      paginationClickable: true,
      direction: "vertical"
    };
    return (
      <Swiper {...params}>
        <div>Slide 1</div>
        <div>Slide 2</div>
        <div>Slide 3</div>
        <div>Slide 4</div>
        <div>Slide 5</div>
      </Swiper>
    );
  }
}

export default Example;

Answer 1

您必须按照选项docs中的说明，在选项内启用鼠标滚轮事件：

const params = {
  container: ".container",
  pagination: ".swiper-pagination",
  paginationClickable: true,
  direction: "vertical",
  mousewheel: true, // https://idangero.us/swiper/api/#mousewheel
};

return (
  <Swiper {...params}>
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
    <div>Slide 4</div>
    <div>Slide 5</div>
  </Swiper>
);

我正在尝试在react.js中构建垂直的鼠标滚轮控制滑动器，但是它不起作用？

1 个答案: