I am use swiper but its show me the errors in my browser not in code Editor ?

[ajaykumar010]

i am use react typescript my code :

import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
// import required modules
import Autoplay from "swiper";
import Navigation from "swiper";
import { Skeleton, useMediaQuery } from "@mui/material";

const Technologies_slider = ({ Images }) => {

return (
    <>
                 <Swiper
                         breakpoints={{
                             640: { slidesPerView: 1 },
                             768: { slidesPerView: 2 },
                             1000: {  slidesPerView: 5 },
                         }}
                         slidesPerView="auto"
                         centeredSlides={false}
                         loop={true}
                         loopFillGroupWithBlank={true}
                         autoplay={{
                             delay: 2500,
                             disableOnInteraction: false,
                         }}
                         navigation={true}
                         modules={[Autoplay, Navigation]}
                 >
                        {
                            Images?.map((item: any, i: number) => (
                                <SwiperSlide key={i}>
                                    <img src={item.image} alt="slider" height="auto" width="auto" />
                                </SwiperSlide>
                            ))
                        }
                 </Swiper>
        </>
)

}
export default Technologies_slider

[sohaibaumer]

Make sure you have the appropriate types for swiper, in case you don't:

npm install @types/swiper --save-dev

here is the updated snippet:

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import Autoplay from "swiper/modules/autoplay";
import Navigation from "swiper/modules/navigation";
import { Skeleton, useMediaQuery } from "@mui/material";

// Define the type for the Images prop
type TechnologiesSliderProps = {
  Images: { image: string }[];
};

const TechnologiesSlider: React.FC<TechnologiesSliderProps> = ({ Images }) => {
  return (
    <>
      <Swiper
        breakpoints={{
          640: { slidesPerView: 1 },
          768: { slidesPerView: 2 },
          1000: { slidesPerView: 5 },
        }}
        slidesPerView="auto"
        centeredSlides={false}
        loop={true}
        loopFillGroupWithBlank={true}
        autoplay={{
          delay: 2500,
          disableOnInteraction: false,
        }}
        navigation={true}
        modules={[Autoplay, Navigation]}
      >
        {Images?.map((item, i) => (
          <SwiperSlide key={i}>
            <img src={item.image} alt="slider" height="auto" width="auto" />
          </SwiperSlide>
        ))}
      </Swiper>
    </>
  );
};

export default TechnologiesSlider;

[ajaykumar010]

I have Already try that one but is still show me error in Compiletion ?