SwiperJS Navigation not showing
Solution 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
Mistakes in your code:
1/2. The value should be a string
JavaScript Strings variables are written inside double or single quotes.
Correct:
nextEl: '.swiper-button-next',
Wrong:
nextEl: .swiper-button-next,
2/2. The string represent CSSSelector
-or- HTMLElement
(Selectors)
This is not appendChild behavior. Use class
-or- id
-or- data attribute
or html-element
selector.
Correct Examples:
2.1: Select by class:
navigation={
nextEl: `.some_class_selector`,
}
2.2: By id:
navigation={
nextEl: `#next_btn`,
}
2.3: By attribute:
navigation={
nextEl: `[data-next-btn]`,
}
2.4: By HTML element (Less usefull):
navigation={
nextEl: `hgroup`,
}
Your html:
<hgroup id="next-btn" class="some_class_selector" data-next-btn>next</hgroup>
As react props:
navigation={{
prevEl: ".some_class_prev_selector",
nextEl: ".some_class_next_selector"
}}
Wrong (The code below will not add <div>next</div>
node to the DOM):
navigation={
nextEl: `<div>next</div>`, /* not appendChild*/
}
SUM: "hello world" demo
**No way to show react Demo because swiper react available only as NPM
-
Step 1: Add next/prev buttons nodes to the DOM.
-
Step 2: Select the next/prev nodes.
<!-- 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 code example:
/* 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>
);
}