Improving an Existing Slider's Performance with React-Swiper

The Slider on the main page of the AuctionWini Seller site was implemented by iterating over the data with the map function and moving it dynamically 1px at a time, continuously. A Slider built this way used a lot of resources on the initial load, which made the page take longer to load. This hurt the user experience, and the performance score in the Google Lighthouse evaluation also came out low.

To solve this, I introduced React-Swiper and improved the Slider.

Before switching to React-Swiper

Figure 1. Before switching to React-Swiper

After switching to React-Swiper

Figure 2. After switching to React-Swiper

React-Swiper Code

jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32      {5 < data.length ? (
        <SwiperContainer
          slidesPerView="auto"
          loop
          autoplay={{
            delay: 0,
            stopOnLastSlide: false,
            disableOnInteraction: false,
          }}
          speed={4000}
          navigation={true}
          modules={[Autoplay]}
          className="swiper-container"
        >
          {data.map((carInfo) => {
            return (
              <SwiperSlide key={carInfo.N_ROWNUM}>
                <MemoizeSlide
                  key={nextId()}
                  carName={carInfo.V_CARNM}
                  imgPath={carInfo.V_IMG_FULL_PATH}
                />
              </SwiperSlide>
            );
          })}
        </SwiperContainer>
      ) : (
        <NoDataBlock>
          <img src={noDataImage} alt="no data" />
          <p> 옥션위니 전문팀이 차량을 검수중입니다.</p>
        </NoDataBlock>
      )}

If you also want the slides to flow like water, apply the CSS below to the wrapper element that wraps the swiper.

1
2
3
4.swiper-wrapper {
    display: flex;
    transition-timing-function: linear;
 }

Improving an Existing Slider's Performance with React-Swiper

More in Work