未显示SwiperJS导航

Question

我的问题是SwiperJS导航不可见。在文档中是这样写的：

导航的nextEl是字符串与CSS选择器或元素的HTML元素，它将像“下一步”按钮点击后，但当我这样做

navigation={{
    nextEl: some text
}}

它根本没有显示出来

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 (
        
             
                {title}
                see all
            

            next,
                    prevEl: prev
                }}
                className={classes.swiper}>
                {
                    [1,2,3,4,5].map(function showSwiperItem(el, i){
                        return (
                            
                                {el}
                            
                        )
                    })
                }
            

        
    )
}

export default HorizontalSwiper;

Answer 1

/

：带有CSS选择器的字符串或元素的HTML元素，单击后将像“下一步/上一步”按钮一样工作。

https://swiperjs.com/swiper-api#navigation

代码中的错误：

1/2。该值应为

字符串

JavaScript字符串

变量写在里面

双引号或单引号

..。

正确：

nextEl: '.swiper-button-next',

错误：

nextEl: .swiper-button-next,

2/2。字符串表示

(选择器)

这不是

appendChild

行为。使用

-或者-

-或者-

选择器

..。

正确的示例：

2.1:按类选择：

navigation={
    nextEl: `.some_class_selector`,
 }

2.2:按id：

navigation={
    nextEl: `#next_btn`,
 }

2.3:按HTML元素(用处较少)：

navigation={
    nextEl: `hgroup`,
 }

你的html：

next

作为react道具：

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

错误的

(下面的代码不会添加

节点连接到DOM)：

​

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

SUM："hello world“演示

*

*

无法显示react Demo，因为swiper react只能作为NPM使用

步骤1：

将下一个/上一个按钮节点添加到DOM。

步骤2：

选择next/prev节点。

​

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

Custom Prev
Custom Next



  
    Slide 1
    Slide 2
    Slide 3
    Slide 4

​

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 (
    
      Custom Next Btn
      Custom Next Btn
      
        Slide 1
        Slide 2
        Slide 3
        Slide 4
      
    
  );
}