customize arrow of swiper js

Question

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>
    </>
  );
}

score 3 · Accepted Answer · answered Sep 08 '22 at 00:01

3

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

answered Sep 08 '22 at 00:01

mocherfaoui

902
1
2
11

Hi there, thanks for your answer. I was playing around so somehow it worked, my approach is in my answer I posted just now. can you also take a look. I am not sure if it is a safe approach, would love to hear your opinion. so basically in my button I put – jimzhou Sep 08 '22 at 01:37
but i think I like your method much better after I take a look!!!!! – jimzhou Sep 08 '22 at 01:41

score 0 · Answer 2 · answered Sep 08 '22 at 01:33

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>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Sep 13 '22 at 13:20

Vlad R · Answer 3 · 2023-04-11T04:53:57.960

0

Here is how you can use custom arrows in Swiper.

const sliderRef = useRef();


<Swiper onSwiper={it => (sliderRef.current = it)} modules={[Navigation]}>
 ...
</Swiper>


<YourCustomArrowComponent
   onClick={() => sliderRef.current?.slideNext()}
/>
<YourCustomArrowComponent
   onClick={() => sliderRef.current?.slidePrev()}
/>

edited Apr 11 '23 at 04:53

answered Apr 11 '23 at 04:43

Vlad R

1,851
15
13

customize arrow of swiper js

3 Answers3