I use "swiper": "6.8.4" in React app for carousel.

I need to change slides by clicking on the "Space" button. By default it changes by clicking on arrows. Could you please advise me how?

function Carousel() {

  document.addEventListener("keydown", function(e){
    if(KeyboardEvent.code == 'Space') {
      swiper.slideNext(); //not working
    }
    if(e.keyCode == 32) {
     swiper.slideNext(); //not working
    }
  });

  return (
    <div className={classes.carouselWrapper}>
      <Swiper
        autoplay={{
          delay: 2500,
          disableOnInteraction: false,
        }}
        keyboard={{
          enabled: true,
          onlyInViewport: true,
        }}
        pagination={true}
        className="mySwiper"
        cssMode={true}
        loop={false}
        scrollbar={{draggable: true}}
        modules={[Autoplay, Navigation, Pagination, Keyboard]}
        mousewheel={true}
        onSwiper={swiper => console.log(swiper)}
        slidesPerView={1}
      >
        <button>
          Change slide by clicking space
        </button>
        <SwiperSlide>
          1
        </SwiperSlide>
        <SwiperSlide>
          2
        </SwiperSlide>
     </Swiper>

CodePudding user response：

First thing you want to do is save swiper to the state so you can call slideNext, you can do this by using the onSwiper function. Then use useEffect to add and remove the keydown listener.

function Carousel() {
  const [swiper, setSwiper) = useState(null);

  useEffect(() => {
    const keydownHandler = e => {
      if(swiper && e.keyCode == 32) {
        e.preventDefault();
        swiper.slideNext();
      }
    }

    document.addEventListener('keydown', keydownHandler);

    return () => {
      document.removeEventListener('keydown', keydownHandler);
    }
  }, [swiper])

  return (
    <div className={classes.carouselWrapper}>
      <Swiper
        autoplay={{
          delay: 2500,
          disableOnInteraction: false,
        }}
        keyboard={{
          enabled: true,
          onlyInViewport: true,
        }}
        pagination={true}
        className="mySwiper"
        cssMode={true}
        loop={false}
        scrollbar={{draggable: true}}
        modules={[Autoplay, Navigation, Pagination, Keyboard]}
        mousewheel={true}
        onSwiper={setSwiper}
        slidesPerView={1}
      >
        <button>
          Change slide by clicking space
        </button>
        <SwiperSlide>
          1
        </SwiperSlide>
        <SwiperSlide>
          2
        </SwiperSlide>
     </Swiper>
    )
}

Keep in mind that space is used by browsers to scroll the page down, you probably don't want to prevent the default action.

CodePudding user response：

document.body.onkeyup = function(e){ if(e.keyCode == 32){ swiper.slideNext(); }

Can you also check if any additional library is using an event listener for spacebarr which might interrupt you're process