I customerized the arrow shape and color of swiper js by adding svg, but it did not have any functionality. And I ended up having two sets of arrows on each side, one is my own arrow button which does not function, the other one is built in swiper js arrow which functions well.

so how to replace swiper's arrow with my own arrow that functions well?

import React from "react";
import sportsList from "../utils/sportsList";
import Card from "./Card";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import { Navigation } from "swiper";

export default function SliderComponent() {
  return (
    <>
      <Swiper
        spaceBetween={50}
        slidesPerView={4}
        onSlideChange={() => console.log("slide change")}
        onSwiper={(swiper) => console.log(swiper)}
        grabCursor={true}
        modules={[Navigation]}
        navigation={true}
        breakpoints={{
          // when window width is >= 320px
          320: {
            slidesPerView: 1,
            spaceBetween: 24,
          },
          // when window width is >= 480px
          480: {
            slidesPerView: 2,
            spaceBetween: 24,
          },
          // when window width is >= 640px
          640: {
            slidesPerView: 6,
            spaceBetween: 24,
          },
          1024: {
            slidesPerView: 6,
            spaceBetween: 32,
            slidesPerGroup: 1,
          },
          1336: {
            slidesPerView: 6,
            spaceBetween: 32,
          },
        }}
        className="relative w-10/12 mx-auto flex flex-row"
      >
        <div className="absolute inset-y-0 left-0 z-10 flex items-center">
          <button >
            <svg
              viewBox="0 0 20 20"
              fill="currentColor"
              
            >
              <path
                fill-rule="evenodd"
                d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                clip-rule="evenodd"
              ></path>
            </svg>
          </button>
        </div>

        {sportsList.map((item) => {
          return (
            <SwiperSlide key={item.id}>
              <Card item={item} />
            </SwiperSlide>
          );
        })}

        <div >
          <button >
            <svg
              viewBox="0 0 20 20"
              fill="currentColor"
              
            >
              <path
                fill-rule="evenodd"
                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                clip-rule="evenodd"
              ></path>
            </svg>
          </button>
        </div>
      </Swiper>
    </>
  );
}

CodePudding user response：

To customize previous and next button in swiper.js you should pass

CodePudding user response：

import React from "react";
import sportsList from "../utils/sportsList";
import Card from "./Card";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import { Navigation } from "swiper";
import "swiper/css/bundle";
import SwiperCore from "swiper";
SwiperCore.use([Navigation]);

export default function SliderComponent() {
  return (
    <>
      <Swiper
        spaceBetween={50}
        slidesPerView={4}
        slidesPerGroup={3}
        onSlideChange={() => console.log("slide change")}
        onSwiper={(swiper) => console.log(swiper)}
        grabCursor={true}
        navigation={{
          prevEl: ".swiper-button-prev",
          nextEl: ".swiper-button-next",
        }}
        breakpoints={{
          // when window width is >= 320px
          320: {
            slidesPerView: 1,
            spaceBetween: 24,
          },
          // when window width is >= 480px
          480: {
            slidesPerView: 2,
            spaceBetween: 24,
          },
          // when window width is >= 640px
          640: {
            slidesPerView: 2,
            spaceBetween: 24,
          },
          1024: {
            slidesPerView: 4,
            spaceBetween: 32,
            slidesPerGroup: 1,
          },
          1336: {
            slidesPerView: 6,
            spaceBetween: 32,
          },
        }}
        tag="section"
        wrapperTag="ul"
        id="main"
        style={{
          "--swiper-navigation-color": "red",
          "--swiper-navigation-size": "150px",
        }}
        className="relative w-10/12 mx-auto flex flex-row"
      >
        <div className="absolute inset-y-0 left-0 z-10 flex items-center">
          <button className=" swiper-button-prev   bg-white -ml-2 lg:-ml-4 flex justify-center items-center w-10 h-10 rounded-full shadow focus:outline-none"></button>
        </div>