Events not triggering

[MikeDrenth]

Hi Everyone,

I am trying to make Swiper work with LightGallery, from their example i need to set the lightGallery after the init. But for some reason it doesn't seem to work. Now ive been trying to debug this, but i am just not getting any events to work with Swiper it seems.

Down below you can see my code, and both console.log's in the on event is not being logged on the page. I'm not sure now what i'm doing wrong. really hope someone here can help me with this.

"use client";
import Image from "next/image";
import { useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import LightGallery from "lightgallery/react";

import { Pagination } from "swiper/modules";
import { cn } from "@/lib/utils";

import "swiper/css";
import "swiper/css/pagination";
import "@/styles/swiper.modules.scss";

import "lightgallery/scss/lightgallery.scss";
import "lightgallery/scss/lg-zoom.scss";

const carouselStyles = {
  "--swiper-pagination-bullet-color": "white",
  "--swiper-pagination-color": "white",
  "--swiper-pagination-bullet-inactive-opacity": "0.7",
  "--swiper-pagination-bullet-inactive-color": "white",
  height: "100%",
  "--swiper-pagination-bullet-border-radius": "30%",
  "--swiper-pagination-bullet-width": "8px",
  "--swiper-pagination-bullet-height": "5px",
};

type ObjectCarouselProps = {
  items: ImageProps[];
};

type ImageProps = {
  large: string;
  small: string;
};

const swiperProps = {
  modules: [Pagination],
  className: "w-full overflow-hidden block relative",
  spaceBetween: 0,
  loop: true,
  slidesPerView: 1,
  pagination: true,
  init: true,
  uniqueNavElements: true,
  style: carouselStyles as React.CSSProperties,
  on: {
    slideChange: function () {
      console.log("123123");
    },
    init: function () {
      console.log("asdasdasd");
    },
  },
};

const ObjectCarousel = ({ items }: ObjectCarouselProps) => {
  const swiperRef = useRef(null);

  return (
    <>
      <Swiper {...swiperProps} ref={swiperRef}>
        {items.map((image: ImageProps, key: number) => {
          return (
            <SwiperSlide className={cn("block relative shrink-0 h-40")} key={key}>
              <Image
                src={image.large}
                alt={`Hier komt de ALT`}
                loading="lazy"
                fill={true}
                className="h-full w-full object-cover object-center swiper-lazy"
                quality={40}
                sizes="100%"
              />
              <div className="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
            </SwiperSlide>
          );
        })}
        <div className={cn("pagination-swiper-carousel w-full flex items-center justify-center mt-8")}></div>
      </Swiper>
    </>
  );
};

export default ObjectCarousel;

[Koreanderson]

@MikeDrenth

To attach event listeners as props you have to update the syntax slightly for React components:

<Swiper
    onSlideChange={() => {console.log('onChange')}}
    onInit={() => {console.log('onInit'}}
    ...
  >

As per docs here: https://swiperjs.com/react#swiper-props

[blueooh]

I think I have the same problem.
The on parameter setting doesn't seem to work.
Below is the svelte code

document
https://swiperjs.com/swiper-api#param-on

code
<swiper-container
direction="vertical"
autoplay={{delay: 800}}
slides-per-view={"auto"}
centered-slides={true}
allow-touch-move={false}
height={400}
cssMode={true}
initial-slide={$commentStore.length - 4}
on:slidechange={onSlideChange}
on={{'init': function (){console.log("initialized")}};
>