我在Carousel中使用swiperjs，下面是我的代码：

import { Navigation, Pagination, Scrollbar, A11y, Controller, Keyboard } from 'swiper';

import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import "swiper/css/a11y"
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import "swiper/css/controller";
import image1 from "../images/image-1.png"
import image2 from "../images/image-2.png"
import image3 from "../images/image-3.png"
function Carousel() {

  return (
    <div className="carousel text-center">
    <Swiper
      // install Swiper modules
      modules={[Navigation, Pagination, Scrollbar, A11y, Controller, Keyboard]}
      spaceBetween={50}
      slidesPerView={1}
      navigation
      pagination={{ clickable: true }}
      scrollbar={{ draggable: true }}
      onSwiper={(swiper) => console.log(swiper)}
      onSlideChange={() => console.log('slide change')}
    >

      <SwiperSlide> <img src={image1} alt="" width="900px"/> </SwiperSlide>
      <SwiperSlide> <img src={image2} alt="" width="900px"/> </SwiperSlide>
      <SwiperSlide> <img src={image3} alt="" width="900px"/> </SwiperSlide>
    </Swiper>

    </div>
  )
  }

export default Carousel;

This is the result如果你看到，左边和右边是空的。我希望在右侧出现下一张幻灯片的部分。我该怎么做？如果我们在第二张幻灯片上，我希望左侧也有相同的行为。请告诉我怎么做？先谢谢你了！