如何解决SwiperJS 导航未显示 1/2该值应该是一个字符串作为反应道具:
我的问题是无法看到 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;
解决方法
nextEl
/ prevEl
:带有 CSS 选择器或 HTML 元素的字符串
单击它后将像“下一个/上一个”按钮一样工作的元素。
https://swiperjs.com/swiper-api#navigation
代码中的错误:
1/2。该值应该是一个字符串
JavaScript Strings 变量写在双引号或单引号内。
正确:
nextEl: '.swiper-button-next',
错误:
nextEl: .swiper-button-next,
2/2。字符串表示 CSSSelector -or- HTMLElement
(选择器)
这不是 appendChild 行为。使用 class
-or- id
-or- html-element
selector。
正确示例:
2.1:按类别选择:
navigation={
nextEl: `.some_class_selector`,}
2.2:通过 ID:
navigation={
nextEl: `#next_btn`,}
2.3:通过 HTML 元素(不太有用):
navigation={
nextEl: `hgroup`,}
您的 html:
<hgroup>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:“hello world”演示
**无法显示 react Demo,因为 swiper react 只能作为 NPM 使用
-
第 1 步:将下一个/上一个按钮节点添加到 DOM。
-
第 2 步:选择下一个/上一个节点。
<!-- 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,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>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。