Load 6 slides to the left and 6 slides to the right outisde the swiper-initialized

[sitz0]

Hello everyone.

The correct structure I'm trying to achieve is this:

But if the user touchMoves or the autoplay continues, the images start generating as soon as they enter swiper-initialized, I want 6 extra slides to the left and 6 extra slides to the right (total 21 to fit perfectly) so it's 9 (container) + 6 + 6 = 21

The closest I got to fixing is the problem is either hacking the CSS of the swiper-wrapper, which doing so fixes on of the two sides and destroys the other, and the latest one I found that kinda solves the problem but not really is adding

loopAdditionalSlides={6}

but this again, waits for the user to swipe until the initializer and then creates 6 more slides at once. Is there a way to make this work with any parameters? I can't seem to find a solution. This is my code and I'm using Swiper 11.2.6 for ReactJS:

`
import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import "swiper/css";
import { supabase } from "../supabaseClient";

const HomeSwiperTeams = () => {
const [teams, setTeams] = useState([]);
const navigate = useNavigate();

useEffect(() => {
const fetchTeams = async () => {

  // Fetch teams and their associated season
  const { data, error } = await supabase
    .from("teams")
    .select(`
      id,
      team_name,
      team_logo,
      assigned_game_id,
      team_slug,
      team_season:team_season (
        id,
        is_finished
      )
    `);

  if (error) {
    console.error("🔥 Error fetching teams:", error.message);
    return;
  }

  // Filter out teams that belong to seasons where is_finished is true
  const filteredTeams = data.filter((team) => team.team_season?.is_finished === false);

  if (filteredTeams?.length > 0) {
    const MAX_SLIDES = 21;
    const repeatCount = Math.ceil(MAX_SLIDES / filteredTeams.length);
    const extended = Array.from({ length: repeatCount }, () => filteredTeams)
      .flat()
      .slice(0, MAX_SLIDES);

    setTeams(extended);
  } else {
    console.warn("⚠️ No active teams found.");
  }
};

fetchTeams();

}, []); // Empty dependency array ensures this runs once after component mounts

const getTeamUrl = (team) => {
const gamePaths = {
1: "leagueoflegends",
2: "cs2",
};
const gamePath = gamePaths[team.assigned_game_id] || "default";
return /teams/${gamePath}/${team.team_slug};
};

const handleTeamClick = (team) => {
navigate(getTeamUrl(team));
};

if (teams.length === 0) return null;
const middleIndex = Math.floor(teams.length / 2);

return (

Our Teams:

<Swiper
modules={[Autoplay]}
slidesPerView={2}
initialSlide={middleIndex}
spaceBetween={50}
loop={true}
allowTouchMove={true}
// allowSlidePrev={false} // Disable swiping to previous slide
allowSlideNext={true} // Enable swiping to next slide
// loopAdditionalSlides={5} // 👈 pre-renders 5 slides before/after
// slidesOffsetBefore={500}
speed={600}
autoplay={{
delay: 3000,
disableOnInteraction: false,
pauseOnMouseEnter: true,
}}
breakpoints={{
0: { slidesPerView: 2 },
400: { slidesPerView: 2 },
768: { slidesPerView: 3 },
992: { slidesPerView: 4 },
1200: { slidesPerView: 7 },
1300: { slidesPerView: 9 },
}}
>
{teams.map((team, index) => (
<SwiperSlide
key={${team.id}-${index}}
onClick={() => handleTeamClick(team)}
style={{ cursor: "pointer" }}
>

))}

);
};

export default HomeSwiperTeams;
`