自定义箭头 Swiper Slider + Next.js + Sass

Posted 2023-05-08

【中文标题】自定义箭头 Swiper Slider + Next.js + Sass

【英文标题】：Custom arrow Swiper Slider + Next.js + Sass

【发布时间】：2022-01-16 07:22:57

【问题描述】：

我在 Next.JS 开发的项目中使用滑块滑动器，并且我正在使用 Sass 进行样式设置。但是，当我要按照文档的要求使用 swiper 类来设置箭头样式时，它就不起作用了。

我需要箭头在组件之外，而不是重叠。

CSS

.swiper-button-next,
.swiper-button-prev 
  background: red;
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled 
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;

.swiper-button-next:after,
.swiper-button-prev:after 
  background: red;
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1;

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next 
  left: 10px;
  right: auto;

.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after 
  content: "prev";
  color: #000;

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev 
  right: 10px;
  left: auto;

.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after 
  content: "next";

.swiper-button-next.swiper-button-white,
.swiper-button-prev.swiper-button-white 
  --swiper-navigation-color: #ffffff;

.swiper-button-next.swiper-button-black,
.swiper-button-prev.swiper-button-black 
  --swiper-navigation-color: #000000;

.swiper-button-lock 
  display: none;

我尝试过更改样式，但组件上没有任何反映。如果我通过浏览器更改样式，它可以正常工作。

【参考方案1】：

更改基本箭头样式非常简单 - 请查看以下代码框：https://codesandbox.io/s/stoic-shaw-q35wq?file=/src/styles.scss

.swiper-button-prev, .swiper-button-next 
  top: 45%;
  width: 40px;
  height: 40px;
  background: #fff;
  border: 1px solid gray;
  border-radius: 50%;
  color: blue;
  font-weight: 700;
  outline: 0;
  transition: background-color .2s ease, color .2s ease;
  
  &::after 
      font-size: 16px;
  


.swiper-button-prev 
  &:after 
      position: relative;
      left: -1px;
  


.swiper-button-next 
  &:after 
      position: relative;
      left: 1px;
  


.swiper-button-prev, .swiper-container-rtl .swiper-button-next 
  left: 10px;
  right: auto;


.swiper-button-next, .swiper-container-rtl .swiper-button-prev 
  right: 10px;
  left: auto;


.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled 
  opacity: 0;
  cursor: auto;
  pointer-events: none;

然而，将箭头移到外面有点棘手。在上面的示例中，我使用了一些 CSS 技巧（负边距和相应的填充）和一些溢出来使其正常工作，但对于您的用例来说可能还不够。

您必须创建自己的下一个/上一个元素：

import React from "react";
import  Navigation, Pagination, Scrollbar, A11y, Controller  from "swiper";
import  Swiper, SwiperSlide  from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";

import "./styles.scss";

const image = "https://source.unsplash.com/featured/300x201";

export default function App() 
  const images = new Array(6).fill( url: image );

  const [swiper, setSwiper] = React.useState();
  const prevRef = React.useRef();
  const nextRef = React.useRef();

  React.useEffect(() => 
    if (swiper) 
      console.log("Swiper instance:", swiper);
      swiper.params.navigation.prevEl = prevRef.current;
      swiper.params.navigation.nextEl = nextRef.current;
      swiper.navigation.init();
      swiper.navigation.update();
    
  , [swiper]);

  return (
    <div className="App">
      <div className="carousel-container">
        <div className="swiper-button" ref=prevRef>
          prev
        </div>
        <Swiper
          modules=[Navigation, Pagination, Scrollbar, A11y, Controller]
          className="external-buttons"
          spaceBetween=24
          slidesPerView=1
          navigation=
            prevEl: prevRef?.current,
            nextEl: nextRef?.current
          
          updateOnWindowResize
          observer
          observeParents
          initialSlide=2
          onSwiper=setSwiper
        >
          images.map((image, index) => (
            <SwiperSlide key=index>
              <img
                
                
                
                className="image"
                src=image.url
              />
            </SwiperSlide>
          ))
        </Swiper>
        <div className="swiper-button" ref=nextRef>
          next
        </div>
      </div>
    </div>
  );

完整示例 - https://codesandbox.io/s/prod-darkness-o483y?file=/src/App.js

重要 - 示例使用的是 Swiper v7