SwiperJS 导航不显示

Question

我的问题是无法看到 SwiperJS 导航。在文档中写道：

navigation 的 nextEl 是带有 CSS 选择器或元素的 HTML 元素的字符串，单击后将像“下一步”按钮一样工作但是当我这样做时

navigation={{
    nextEl: <div>some text</div>
}}

完全没有显示

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Navigation } from 'swiper';
import 'swiper/swiper-bundle.min.css'

import classes from './HorizontalSwiper.module.css';

SwiperCore.use([Navigation]);

const HorizontalSwiper = ({title}) => {
    return (
        <section className={classes.hs}>
             <header>
                <div className={classes.hs__title}>{title}</div>
                <div className={classes.hs__seeAll}>see all</div>
            </header>

            <Swiper 
                spaceBetween={10}
                slidesPerView={2} 
                direction='horizontal'
                navigation={{
                    nextEl: <div>next</div>,
                    prevEl: <div>prev</div>
                }}
                className={classes.swiper}>
                {
                    [1,2,3,4,5].map(function showSwiperItem(el, i){
                        return (
                            <SwiperSlide key={`${el}_${i}`} className={classes.swiper__slide}>
                                {el}
                            </SwiperSlide>
                        )
                    })
                }
            </Swiper>

        </section>
    )
}

export default HorizontalSwiper;

Answer 1

nextEl / prevEl :String with CSS selector or HTML element of the element that will work like "next/prev" button after click on it. https://swiperjs.com/swiper-api#navigation

您的代码中的错误：

1/2。该值应该是 string

JavaScript Strings变量写在双引号或单引号.

内

正确：

nextEl: '.swiper-button-next',

错误：

nextEl: .swiper-button-next,

2/2。字符串表示 `CSSSelector` -or- `HTMLElement` (Selectors)

这不是 appendChild 行为。使用 class - 或 - id - 或 - data attribute 或 html-element selector.

正确示例：

2.1：Select 来自 class：

 navigation={
    nextEl: `.some_class_selector`,
 }

2.2: 按id:

 navigation={
    nextEl: `#next_btn`,
 }

2.3: 通过 attribute:

 navigation={
    nextEl: `[data-next-btn]`,
 }

2.4：按 HTML 元素（不太有用）：

 navigation={
    nextEl: `hgroup`,
 }

你的html：

<hgroup id="next-btn" class="some_class_selector" data-next-btn>next</hgroup>

作为反应道具：

navigation={{
   prevEl: ".some_class_prev_selector",
   nextEl: ".some_class_next_selector"
}}

错误（下面的代码不会将<div>next</div>节点添加到DOM）：

 navigation={
    nextEl: `<div>next</div>`, /* not appendChild*/
 }

SUM：“你好世界”演示

**无法显示 React Demo，因为 swiper React 仅作为 NPM

步骤 1： 将 next/prev 个按钮节点添加到 DOM。
第 2 步： Select next/prev 个节点。

<!-- Initialize Swiper -->
const swiper = new Swiper('.swiper-container', {
  loop: true,
  navigation: {
    nextEl: '.custom_next_btn',
    prevEl: '.custom_prev_btn',
  },
});

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<button class="custom_prev_btn">Custom Prev</button>
<button class="custom_next_btn">Custom Next</button>

<!-- Swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
  </div>
</div>


<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

React 代码示例：

/* index.js */
import React from "react";
import "./style.css";

// import Swiper core and required modules
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from "swiper";

import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";
import "swiper/components/scrollbar/scrollbar.scss";

// install Swiper modules
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

export default function App() {
  return (
    <div>
      <button class="custom_next">Custom Next Btn</button>
      <button class="custom_prev">Custom Next Btn</button>
      <Swiper
        spaceBetween={50}
        slidesPerView={3}
        navigation={{
          nextEl: ".custom_next",
          prevEl: ".custom_prev"
        }}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
      </Swiper>
    </div>
  );
}

SwiperJS 导航不显示

SwiperJS Navigation not showing

swiper

reactjs

swiperjs

swiper.js

1/2。该值应该是 string

2/2。字符串表示 `CSSSelector` -or- `HTMLElement` (Selectors)

作为反应道具：

SUM：“你好世界”演示

SwiperJS 导航不显示

SwiperJS Navigation not showing

swiper

reactjs

swiperjs

swiper.js

1/2。该值应该是 string

2/2。字符串表示 CSSSelector -or- HTMLElement (Selectors)

作为反应道具：

SUM：“你好世界”演示

2/2。字符串表示 `CSSSelector` -or- `HTMLElement` (Selectors)