Proposal - new loop mode

[jmparsons]

The current loop mode doesn't work well with breakpoints.

#6113

From looking at the code, when the loop mode is active, a translate property gets added to keep the positions. The problem is this translate stops working when a break point is hit, and in turn everything jumps around - the duplicates push the active index out. If the active index is 1, then on a breakpoint hit, it could end up being -3 or -20, because of the padded duplicates.

This new mode would be something like "loopActive."

It would take slidesPerView and slidesPerMove. The logic of loop active would be to instead of translate modifying this as if it were a group, to instead use the slidesPerMove value as the jump value. So slideNext and slidePrev, triggered by anything, touch, mouswheel, navigation etc, would take into account the slidesPerMove value and slideToLoop + loopFix the value from slidesPerMove instead of just 1. The slidesPerView would be used just like it was before, to determine amount of slides visible.

By moving the logic out of actually grouping ie slidesPerGroup, the loopFix logic can work to reposition the entire track under the active. It would still be in loop mode, but only by a value of 1. When a breakpoint is hit in loop mode with a value of 1, the track moves by 1. Going from a breakpoint with slidersPerView of 3 to 4, will move the active index over by one. To fix this and keep its position while going through break point, on break point change it would need to run slideToLoop to the active index.

I almost had it working, but there's no access to loopFix - I had to manually run it from the console. The active slide is always the first.

onBreakPoint={(swiper) => {
  swiper.slideToLoop(activeX.current, 0);
}}

Here's a sample:

https://codesandbox.io/s/broken-dawn-ljvj5l?file=/src/App.tsx:0-5642

import "./styles.css";
import { MutableRefObject, useCallback, useRef, useState } from "react";
import SwiperCore, { Mousewheel, Navigation, Pagination } from "swiper";
import "swiper/css";
import { Swiper, SwiperSlide, useSwiper } from "swiper/react";

type SlideBtnProps = {
  activeX: MutableRefObject<number>;
};

type PaginationProps = {
  pagingCount: number;
  pagingTotal: number;
  slideCount: number;
};

const SlideNextBtn = ({ activeX }: SlideBtnProps) => {
  const swiper = useSwiper();
  return (
    <button
      onClick={() => {
        swiper.slideNext();
        activeX.current = swiper.realIndex;
      }}
      style={{
        position: "absolute",
        display: "block",
        right: 0,
        width: "50px",
        height: "50px",
        top: "50%",
        transform: "translateY(-50%)",
        zIndex: 10
      }}
    >
      {">"}
    </button>
  );
};

const SlidePrevBtn = ({ activeX }: SlideBtnProps) => {
  const swiper = useSwiper();
  return (
    <button
      onClick={() => {
        swiper.slidePrev();
        activeX.current = swiper.realIndex;
      }}
      style={{
        position: "absolute",
        display: "block",
        left: 0,
        width: "50px",
        height: "50px",
        top: "50%",
        transform: "translateY(-50%)",
        zIndex: 10
      }}
    >
      {"<"}
    </button>
  );
};

const Paging = ({ pagingCount, pagingTotal, slideCount }: PaginationProps) => (
  <div
    style={{
      position: "absolute",
      bottom: "20px",
      left: "50%",
      transform: "translateX(-50%)",
      padding: "5px 10px",
      background: "#fff",
      zIndex: 10
    }}
  >
    <div>
      {Math.ceil(pagingCount / slideCount)} of{" "}
      {Math.round(pagingTotal / slideCount)}
    </div>
  </div>
);

const Slider = ({ items }: { items: string[] }) => {
  const activeX = useRef(0);
  const [slideCount, setSlideCount] = useState(0);
  const [pagingCount, setPagingCount] = useState(0);
  const [pagingTotal, setPagingTotal] = useState(0);
  const paginationLabel = useRef<HTMLHeadingElement>(null);

  const onBeforeInit = (swiper: SwiperCore) => {
    if (
      typeof swiper.params.pagination !== "boolean" &&
      swiper.params.pagination
    ) {
      swiper.params.pagination.el = paginationLabel.current;
      swiper.params.pagination.clickable = true;
      swiper.params.pagination.type = "custom";
      swiper.params.pagination.renderCustom = (swiper, current, total) => {
        return current + "::" + total;
      };
    }
  };

  const updateSlideNavLogic = useCallback(
    (swiper: SwiperCore, slideChange: number) => {
      swiper.slidePrev = (speed = swiper.params.speed, runCallbacks = true) => {
        // needs access to loopFix
        return swiper.slideTo(
          swiper.activeIndex - slideChange,
          speed,
          runCallbacks
        );
      };
      swiper.slideNext = (speed = swiper.params.speed, runCallbacks = true) => {
        // needs access to loopFix
        return swiper.slideTo(
          swiper.activeIndex + slideChange,
          speed,
          runCallbacks
        );
      };
      swiper.update();
    },
    []
  );
  return (
    <div style={{ position: "relative" }}>
      <Swiper
        style={{
          position: "relative",
          paddingLeft: "50px",
          paddingRight: "50px"
        }}
        onBeforeInit={onBeforeInit}
        onInit={(swiper) => console.log(swiper)}
        onPaginationRender={(swiper, pagerEl) => {
          const pagingInfo = pagerEl.innerHTML;
          const [count, total] = pagingInfo.split("::");
          setPagingCount(parseInt(count, 10));
          setPagingTotal(parseInt(total, 10));
        }}
        direction="horizontal"
        modules={[Mousewheel, Navigation, Pagination]}
        loop
        onBreakpoint={(swiper, bpParams) => {
          if (bpParams.slidesPerView && bpParams.slidesPerView !== "auto") {
            setSlideCount(bpParams.slidesPerView);
            updateSlideNavLogic(swiper, bpParams.slidesPerView);
          }
          // hack - wasn't registering otherwise
          // wouldn't need if it had internal
          // may need to resave to run
          // always keeps the current index active
          // comment out to see default action on resize
          setTimeout(() => {
            swiper.slideToLoop(activeX.current, 0);
          }, 0);
        }}
        mousewheel={{ thresholdDelta: 50, forceToAxis: true }}
        breakpoints={{
          0: { slidesPerView: 2 },
          600: { slidesPerView: 3 },
          800: { slidesPerView: 4 },
          1000: { slidesPerView: 5 }
        }}
      >
        {items.map((item, index) => (
          <SwiperSlide key={`key-item-${index}`}>
            {({ isActive }) => (
              <div style={{ position: "relative" }}>
                <img src={item} alt="" />
                <div
                  style={{
                    position: "absolute",
                    top: 0,
                    left: 0,
                    background: "navy",
                    color: "#fff",
                    padding: "3px 5px"
                  }}
                >
                  {index} {isActive ? "active" : ""}
                </div>
              </div>
            )}
          </SwiperSlide>
        ))}
        <SlideNextBtn activeX={activeX} />
        <SlidePrevBtn activeX={activeX} />
        <div ref={paginationLabel} style={{ display: "none" }} />
      </Swiper>
      <Paging
        pagingCount={pagingCount}
        pagingTotal={pagingTotal}
        slideCount={slideCount}
      />
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <Slider items={Array(20).fill("https://www.fillmurray.com/200/200")} />
    </div>
  );
}