自定义swiper js的箭头

Question

我通过添加svg自定义了swiper js的箭头形状和颜色，但是没有任何功能。我最终在每一侧都有两组箭头，一组是我自己的箭头按钮，它不起作用，另一组是内置的 swiper js 箭头，功能良好。

那么如何用我自己的功能良好的箭头来替换 swiper 的箭头呢？

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

Answer 1

要在 swiper.js 中自定义上一个和下一个按钮，您应该将

NavigationOptions

对象传递给

navigation

而不是

true

，这样就可以做到：

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

然后您可以将这些类名用于您的按钮

不要忘记删除此

import "swiper/css/navigation";

，这样它就不会覆盖您的导航按钮样式

您可以在下面看到一个示例

Answer 2

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>

Answer 3

以下是如何在 Swiper 中使用自定义箭头。

const sliderRef = useRef();


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


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

Answer 4

products 是通过 api 获取数据然后使用滑块

    import { Swiper, SwiperSlide } from 'swiper/react';
    import { Pagination, A11y,Navigation } from 'swiper';
    
    import 'swiper/scss';
    import 'swiper/scss/pagination';
    import "swiper/css/navigation";
    
    
     return (
            <Swiper
                modules={[Pagination, Navigation, A11y]}
                spaceBetween={10}
                slidesPerView={"auto"}
                pagination={{ clickable: true }}
                grabCursor={true}
                navigation={true}
                breakpoints={{
                    480: {
                        slidesPerView: 2,
                    },
                    768: {
                        slidesPerView: 2,
                    },
                    992: {
                        slidesPerView: 4,
                    },
                }}
                className="related_swiper"
            >
                {
                    products && products.map(product => (
                        <SwiperSlide key={product.id}>
                            <ProductCard key={product.id} product={product} productImages={productImages} />
                        </SwiperSlide>
                    ))
                }
            </Swiper>
        );
    
    
    
    
    
    
    
          <div className="card products_card">
                    <figure className="products_img">
                        <Link href={`/product-details/${EID}?${encodeURIComponent(product.name)}`}>
                            <img src={`/uploads/product/${imageName[0]?.imageName}`} alt="product-img" />
                        </Link>
                    </figure>
                    <div className="products_details">
                        <span className="rating_star">
                            {
                                [...Array(product.ratings)].map((_, i) => <IoMdStar />)
                            }
                        </span>
                        <h3 className="products_title">
                            <Link href={`/product-details/${EID}?${encodeURIComponent(product.name)}`}>{product.name}</Link>
                        </h3>
                        <h5 className="products_info">{product.category}</h5>
                        <div className="separator1"></div>
                        <h2 className="products_price">
                            {displayMoney(Math.round(product.sale_price))} &nbsp;
                            <small><del>{displayMoney(Math.round(product.original_price))}</del> <small className='text-success'>({product.discount}% Off )</small></small>
                        </h2>
    
                        <button
                            type="button"
                            className={`btn products_btn ${activeClass(EID)}`}
                            onClick={handleAddItem}
                            disabled={product.stock === 0}
                        >
                            {active ? 'Added' : 'Add to cart'}
                        </button>
                    </div>
                </div>