customize arrow of swiper js

jimzhou 0
Viewed 57

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 class="bg-white -ml-2 lg:-ml-4 flex justify-center items-center w-10 h-10 rounded-full shadow focus:outline-none">
            <svg
              viewBox="0 0 20 20"
              fill="currentColor"
              class="chevron-left w-6 h-6"
            >
              <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 class="absolute inset-y-0 right-0 z-10 flex items-center">
          <button class="bg-white -mr-2 lg:-mr-4 flex justify-center items-center w-10 h-10 rounded-full shadow focus:outline-none">
            <svg
              viewBox="0 0 20 20"
              fill="currentColor"
              class="chevron-right w-6 h-6"
            >
              <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>
    </>
  );
}
arrow-functions swiper.js reactjs
2 Answers

To customize previous and next button in swiper.js you should pass NavigationOptions object to navigation instead of true, something like this will do it:

navigation={{
          nextEl: ".image-swiper-button-next",
          prevEl: ".image-swiper-button-prev",
          disabledClass: "swiper-button-disabled"
        }}

and then you can use those classnames for your buttons

don't forget to remove this import "swiper/css/navigation"; so it won't override your navigation button styles

you can see an example below

Edit swiper-navigation-react (forked)

mocherfaoui0 
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>
jimzhou0
Related