Я использую Swiper, у которого есть две пользовательские навигации. Первые работы, но второй - нет - почему? ⇐ Javascript

[Anonymous]

Это моя пользовательская навигация компонент на Swiper Storiesnavigation.tsx :

Код: Выделить всё

"use client";
import React from "react";
import { IoIosArrowForward, IoIosArrowBack } from "react-icons/io";
import i18n from "@/lib/i18n";

const StoriesNavigation = ({
prevRef,
nextRef,
className,
}: {
prevRef: any;
nextRef: any;
className?: string;
}) => {
return (


{i18n.language === "en" ? [i] : }


{i18n.language === "en" ?  : }


);
};

export default StoriesNavigation;

Я использую эти компоненты storiesnavigation.tsx дважды в компоненте Successstories.tsx ниже -только для больших экранов и один раз для мобильных экранов.
"use client";
import {
Container,
SectionBg,
StoriesNavigation,
TitleSection,
} from "../../components/index";
import React, { useRef } from "react";
import { useTranslation } from "react-i18next";
import i18n from "../../lib/i18n";
import what_they_say_1 from "../../public/assets/images/what_they_say_1.webp";
import what_they_say_2 from "../../public/assets/images/what_they_say_2.webp";
import what_they_say_3 from "../../public/assets/images/what_they_say_3.webp";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import Image from "next/image";

const SuccessStories = () => {
// setup the custom pagination
const prevDesktopRef = useRef(null);
const nextDesktopRef = useRef(null);
const prevMobileRef = useRef(null);
const nextMobileRef = useRef(null);

const swiperRef = useRef(null);

const { t } = useTranslation();
const successStoriesData = t("services.successStorie.list", {
returnObjects: true,
});
const successStoriesArr = successStoriesData.map((item, i) => ({
image: [what_they_say_1, what_they_say_2, what_they_say_3][i % 3],
title: item.title,
description: item.description,
name: item.name,
position: item.position,
}));
return (










(swiperRef.current = swiper)}
onBeforeInit={(swiper: any) => {
swiper.params.navigation.prevEl =
prevDesktopRef.current || prevMobileRef.current;
swiper.params.navigation.nextEl =
nextDesktopRef.current || nextMobileRef.current;
}}
spaceBetween={20}
slidesPerView={1}
breakpoints={{
1024: { slidesPerView: 1 },
768: { slidesPerView: 2 },
0: { slidesPerView: 1 },
}}
className="mb-8"
>
{successStoriesArr.map((item, i) => (






"{item.title}"


{item.description}

{item.name}

'{item.position}'[/i]



))}

{/* Custom Pagination */}




);
};

export default SuccessStories;

Моя проблема заключается в том, что первая навигация работает хорошо, но вторая не работает, и нет сообщений об ошибках, я хочу просто решить эту проблему?

Подробнее здесь: https://stackoverflow.com/questions/797 ... e-second-d