First slide is not sitting flush with the left boundary of the container on load

[sebpowell]

Hi there,

I've got a slider that's configured in the following way:

<Swiper
  onBeforeInit={(swiper) => {
    swiperRef.current = swiper;
    setInnerRef && setInnerRef(swiper);
  }}
  onActiveIndexChange={(swiper) => {
    onActiveIndexChange && onActiveIndexChange(swiper.activeIndex);
  }}
  centeredSlides={true}
  spaceBetween={64}
  slidesPerView={1.2}
>
  {items.map((item, i) => {
    return (
      <SwiperSlide key={i}>
        {createElement(childComponent, { item, index: i })}
      </SwiperSlide>
    );
  })}
</Swiper>

On page load, the first slide of the carousel is slightly indented – see:

What I would like is for the first slide to be sitting flush with the left boundary of the container – like so:

And then, when the next slide is loaded, it should just behave like a slider with centeredSlides enabled (which it does already):

Does anyone know how I can achieve this?