Swiper JS

Установка

yarn add swiper

Настройки

"use client"

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
import { Button } from "@/components/_variants/Button";

// Heroicoins
import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/20/solid'

// Import Swiper styles
import "swiper/css";
import 'swiper/css/navigation';
import "swiper/css/pagination";

// import required modules
import { Autoplay, Navigation, Pagination } from "swiper";
import Image from "next/image";

export default function App() {
  const swiper = [
    {
      bgSlide: 'bg-light-primary',
      heading: [<>Lorem ipsum dolor sit amet&nbsp;consectetur adipiscing</>],
      text: [<>Lorem ipsum dolor sit amet consectetur adipiscing:<br className="hidden lg:block"/> Lorem ipsum dolor sit amet consectetur adipiscing</>],
      buttonText: 'Lorem ipsum dolor sit amet consectetur adipiscing',
      subText: 'Lorem ipsum dolor sit amet consectetur adipiscing',
      imgSrc: '/swiper/slide_1.png',
      imgAlt: 'Lorem ipsum dolor sit amet consectetur adipiscing'
    },
    {
      bgSlide: 'bg-green-600',
      heading: 'Slide 2'
    },
    {
      bgSlide: 'bg-indigo-600',
      heading: 'Slide 3'
    },
    {
      bgSlide: 'bg-purple-600',
      heading: 'Slide 4'
    }
  ]

  return (
    <>
      <div className="relative">
        <Swiper

          slidesPerView={'auto'}
          //spaceBetween={0}

          centeredSlides={true}
          loop={true}

          speed={500}

          initialSlide={0}

          autoplay={{
            delay: 7000,
            disableOnInteraction: false,
            pauseOnMouseEnter: true,
            waitForTransition: true
          }}

          navigation={{
            nextEl:".swiper-next",
            prevEl:".swiper-prev",
          }}

          pagination={{
            el:".swiper-pagination",
            dynamicBullets: true,
            clickable: false,
          }}

          // freeMode={{
          //   enabled: true,
          //   sticky: true,
          // }}

          // breakpoints={{
          //   "0": {
          //     spaceBetween: 8,
          //   },
          //   "480": {
          //     spaceBetween: 10,
          //   },
          //   "640": {
          //     spaceBetween: 12,
          //   },
          //   "760": {
          //     spaceBetween: 16,
          //   },
          //   "1024": {
          //     spaceBetween: 20,
          //   },
          //   "1280": {
          //     spaceBetween: 24,
          //   },
          // }}

          modules={[ Autoplay, Navigation, Pagination ]}

          className="mySwiper"
        >
          {swiper.map((item) => {
            return <SwiperSlide key='id'>
              <div className={item.bgSlide}>
                <div className="flex justify-between h-full">
                  <div className="pl-16 flex items-center text-white">
                    <div className="space-y-12">
                      <div className="space-y-4">
                        {item.heading && <h2 className="text-5xl font-bold">{item.heading}</h2>}
                        {item.text && <p>{item.text}</p>}
                      </div>

                      <div className="space-y-2">
                        {item.buttonText && <Button button={item.buttonText} color='white' size="xl" flat={false} />}
                        {item.subText && <p className="text-sm">{item.subText}</p>}
                      </div>
                    </div>
                  </div>
                  <div className="flex justify-center items-center">
                    {item.imgSrc && <Image className="object-cover" src={item.imgSrc} width={640} height={640} alt={item.imgAlt} />}
                  </div>
                </div>
              </div>
            </SwiperSlide>
          })}

          <div className="container absolute inset-0 hidden md:flex items-center h-full">
            <div className="absolute left-0 inset-y-0 h-full z-10 flex items-center">
              <button className="swiper-prev swiper-navBtn">
                <ChevronLeftIcon
                  className="h-10 w-10 pr-0.5 bg-white text-light-primary rounded-lg duration-200 shadow-lg"
                  aria-hidden="true"
                />
              </button>
            </div>

            <div className="absolute right-0 inset-y-0 h-full z-10 flex items-center">
              <button className="swiper-next swiper-navBtn">
                <ChevronRightIcon
                  className="h-10 w-10 pr-0.5 bg-white text-light-primary rounded-lg duration-200 shadow-lg"
                  aria-hidden="true"
                />
              </button>
            </div>
          </div>

        </Swiper>


        <div className="swiper-pagination mb-4"></div>
      </div>
    </>
  );
}