title: How to make Swiper carousel change slides by clicking space in React?
body: <p>I use &quot;swiper&quot;: &quot;6.8.4&quot; in React app for carousel.</p>
  <p>I need to change slides by clicking on the &quot;Space&quot; button.
  By default it changes by clicking on arrows.
  Could you please advise me how?</p>
  <pre><code>function Carousel() {
  
    document.addEventListener(&quot;keydown&quot;, function(e){
      if(KeyboardEvent.code == 'Space') {
        swiper.slideNext(); //not working
      }
      if(e.keyCode == 32) {
       swiper.slideNext(); //not working
      }
    });
  
    return (
      &lt;div className={classes.carouselWrapper}&gt;
        &lt;Swiper
          autoplay={{
            delay: 2500,
            disableOnInteraction: false,
          }}
          keyboard={{
            enabled: true,
            onlyInViewport: true,
          }}
          pagination={true}
          className=&quot;mySwiper&quot;
          cssMode={true}
          loop={false}
          scrollbar={{draggable: true}}
          modules={[Autoplay, Navigation, Pagination, Keyboard]}
          mousewheel={true}
          onSwiper={swiper =&gt; console.log(swiper)}
          slidesPerView={1}
        &gt;
          &lt;button&gt;
            Change slide by clicking space
          &lt;/button&gt;
          &lt;SwiperSlide&gt;
            1
          &lt;/SwiperSlide&gt;
          &lt;SwiperSlide&gt;
            2
          &lt;/SwiperSlide&gt;
       &lt;/Swiper&gt;
  </code></pre>