CODEWITHSUNDEEP
javascriptcssswiper.js
ronak patel
ronak patel

Reputation: 418

swiper.js custom previous and next button does not work on click

import React, { useState, Fragment } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, {
  Navigation,
  Pagination,
  EffectFade,
  EffectCoverflow,
  EffectCube,
} from "swiper";
import "swiper/swiper-bundle.css";
import "./App.css";
import SlideContent from "./SlideContent";
import Person from "./images/person.png";

SwiperCore.use([
  EffectCoverflow,
  EffectCube,
  EffectFade,
  Navigation,
  Pagination,
]);

const slides = [];
for (let i = 0; i < 5; i += 1) {
  slides.push(
    <SwiperSlide key={`slide-${i}`}>
      <div className="round-item">
        <img src={Person} style={{ listStyle: "none" }} alt={`Slide ${i}`} />
      </div>
    </SwiperSlide>
  );
}

function App() {
  const [slide, setSlide] = useState(0);
  return (
    <Fragment>
      <Swiper
        slidesPerView="auto"
        initialSlide="2"
        effect="coverflow"
        navigation={{
          navigation: {
            nextEl: ".review-swiper-button-next",
            prevEl: ".review-swiper-button-prev",
          },
        }}
        grabCursor={true}
        centeredSlides={true}
        coverflowEffect={{
          rotate: 0,
          stretch: 0,
          depth: 100,
          modifier: 1,
        }}
        onSlideChange={(swiper) => {
          console.log("Slide index changed to: ", swiper.activeIndex);
          setSlide(swiper.activeIndex);
        }}
      >
        {slides}
      </Swiper>

      <SlideContent slide={slide}>
        <div className="review-swiper-button-prev "></div>
        <div className="review-swiper-button-next "></div>
      </SlideContent>
    </Fragment>
  );
}

export default App;

CSS code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

.swiper-container {
  position: relative;
  width: 100%;
  padding-top: 50px;
  padding-bottom: 150px;
}

.swiper-slide {
  width: 180px;
  height: 180px;
  margin: 0 30px;
}

img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.swiper-slide-active .round-item {
  opacity: 1;
  transform: scale(1.24);
  margin-top: 20px;
}

.round-item {
  width: 100%;
  height: 100%;
  opacity: 0.2;
  box-sizing: border-box;
  overflow: hidden;
  margin-top: 25px;
}

.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right {
  background-image: none !important;
}

.review-swiper-button-next {
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url(./images/next.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  right: 97px;
  top: 0;
  cursor: pointer;
}

.review-swiper-button-prev {
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url(./images/previous.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  left: 27px;
  top: 0;
  cursor: pointer;
}

I have created custom arrows for previous and next. But when I click on any of the button, it does not move to next or previous slide. Am I missing something here. I didn't find anything in the docs as well. How to achieve this as I have searched everywhere but didnt get the solution. Hoping to get from here.

Upvotes: 1

Views: 13660

Answers (3)

hamza liaqat
hamza liaqat

Reputation: 157

This is the best solution:

import React, { useRef } from "react";
// For Typescript 
// import SwiperCore from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";


const SliderComponent = () => {
const swiperRef = useRef();

// For Typescript!
// const swiperRef = useRef<SwiperCore>();  


const sliderSettings = {
  440: {
    slidesPerView: 1,
    spaceBetween: 30,
  },
  680: {
    slidesPerView: 2,
    spaceBetween: 30,
  },
  1024: {
    slidesPerView: 3,
    spaceBetween: 30,
  },
};

return (
    <div>
      <button onClick={() => swiperRef.current?.slidePrev()}>Prev</button>

      <Swiper
        slidesPerView={3}
        breakpoints={sliderSettings}
        onBeforeInit={(swiper) => {
          swiperRef.current = swiper;
        }}
      >
        <SwiperSlide>
          Slide 1
        </SwiperSlide>
        <SwiperSlide>
          Slide 2
        </SwiperSlide>
        <SwiperSlide>
          Slide 3
        </SwiperSlide>
        <SwiperSlide>
          Slide 4
        </SwiperSlide>
        <SwiperSlide>
          Slide 5
        </SwiperSlide>
      </Swiper>

      <button onClick={() => swiperRef.current?.slideNext()}>Next</button>
    </div>
  );
};

export default SliderComponent;

Upvotes: 1

danhat
danhat

Reputation: 11

I had the same problem. I just did a hard refresh (Ctrl-Shift-R on Windows) and the buttons worked.

Hopefully it works for you.

Upvotes: 1

saboshi69
saboshi69

Reputation: 895

You don't need to nest navigation props twice times in <Swiper /> :

 <Swiper>
   navigation={{
     nextEl: '.review-swiper-button-next',
     prevEl: '.review-swiper-button-prev',
   }}
 <Swiper />

Upvotes: 3

Related Questions