Swiper

  • A swiper is a user interface element that enables touch-based navigation through content, often used for slideshows or image galleries on websites and mobile apps.For more details
    • Installation
    npm i swiper
    Script
    • Change the value of Brackpoint according to your requirment.
    • change the import path of image according to your folder structure of project.
    import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper";

import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

import image6 from "../../../../assets/modules/landing-pages/images/home-4/01.webp";
import image7 from "../../../../assets/modules/landing-pages/images/home-4/08.webp";
import image8 from "../../../../assets/modules/landing-pages/images/home-4/03.webp";

const swiper = () => {
  return (
    <Fragment>
        <Swiper
                className="p-0 m-0 mb-2 swiper-wrapper list-inline"
                slidesPerView={3}
                spaceBetween={32}
                modules={[Navigation]}
                navigation={
                  nextEl: "#app-slider-next",
                  prevEl: "#app-slider-prev",
                }
                breakpoints={
                  320: { slidesPerView: 1 },
                  550: { slidesPerView: 2 },
                  991: { slidesPerView: 3 },
                  1400: { slidesPerView: 3 },
                  1500: { slidesPerView: 3 },
                  1920: { slidesPerView: 3 },
                  2040: { slidesPerView: 4 },
                  2440: { slidesPerView: 4 },
                }
              >
                <SwiperSlide className="card card-slide overflow-hidden">
                  <img
                    src={image6}
                    alt="team-details"
                    className="img-fluid"
                    loading="lazy"
                  />
                  <Card.Body>
                    <h5 className="mb-3">Cubix</h5>
                  </Card.Body>
                </SwiperSlide>
                <SwiperSlide className="card card-slide overflow-hidden">
                  <img
                    src={image8}
                    alt="team-details"
                    className="img-fluid"
                    loading="lazy"
                  />
                  <Card.Body>
                    <h5 className="mb-3">Radical Toast</h5>
                  </Card.Body>
                </SwiperSlide>
                <SwiperSlide className="card card-slide overflow-hidden">
                  <img
                    src={image7}
                    alt="team-details"
                    className="img-fluid"
                    loading="lazy"
                  />
                  <Card.Body>
                    <h5 className="mb-3">Erbology</h5>
                  </Card.Body>
                </SwiperSlide>
              </Swiper>
    </Fragment>
)
}
    Previous Next