A slider without any js

tailwind-no-js-slider.tsx

import React from 'react';
import Image from 'next/image';

export function Slider() {
  const sliderRef = React.useRef<HTMLDivElement>(null);
  const [activeIndex, setAciveIndex] = React.useState(0);

  function setActive(i: number) {
    sliderRef.current?.scrollTo((sliderRef.current.scrollWidth / quotes.length) * i, 0);
  }

  React.useEffect(() => {
    if (!sliderRef.current) return;
    const sliderItems = Array.from(sliderRef.current.children);

    const observer = new IntersectionObserver(
      function (entries) {
        const visibleOne = entries.find((x) => x.isIntersecting);
        const i = sliderItems.findIndex((x) => visibleOne?.target === x);
        setAciveIndex(i);
      },
      {
        root: sliderRef.current,
        threshold: 0.5,
      }
    );

    sliderItems.forEach((x) => observer.observe(x));

    return () => observer.disconnect();
  }, []);

  return (
    <>
      <div className="max-w-7xl mx-auto px-4 relative darken-image bg-gray">
        <Image src="/quotes-bg.jpg" layout="fill" objectFit="cover" />
        {/* slider */}
        <div className="pb-8 pt-10 md:pt-28 md:pb-20 relative z-10">
          <div ref={sliderRef} className="slider flex flex-nowrap text-white italic">
            {quotes.map((x, i) => (
              <div className="slider-item text-center flex flex-col justify-center px-8" key={i}>
                <div className="max-w-4xl mx-auto ">
                  <p className="sm:text-lg lg:text-xl xl:text-2xl 2xl:text-3xl">{x.text}</p>
                  <p className="font-bold mt-6 lg:text-lg">{x.author}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
        {/* dots */}
        <div className="flex justify-center space-x-4 pb-6 sm:pb-10 relative z-10">
          {quotes.map((x, i) => (
            <div
              key={i}
              onClick={() => setActive(i)}
              className={`rounded-full w-2 h-2 sm:w-3 sm:h-3 cursor-pointer ${
                i === activeIndex ? 'bg-primary' : 'bg-white'
              }`}></div>
          ))}
        </div>
      </div>

      <style jsx>
        {`
          .slider {
            scroll-snap-type: x mandatory;
            overflow-x: scroll;
            scrollbar-width: none;
          }
          .slider::-webkit-scrollbar {
            display: none;
          }

          .slider-item {
            flex: 0 0 100%;
            user-select: none;
            scroll-snap-align: start;
          }
        `}
      </style>
    </>
  );
}

const quotes = [
  {
    text: 'Magnis arcu eget volutpat mattis cursus platea maecenas at lobortis fusce pulvinar duis curae nullam tristique leo urna rhoncus luctus suscipit in',
    author: 'Per Persson, PerEL AB',
  },
  {
    text: 'Porta eget orci sed cubilia porttitor semper bibendum fusce pharetra nec netus lobortis sit donec proin vel adipiscing fermentum est et imperdiet sem ex faucibus posuere senectus euismod penatibus class',
    author: 'Jon Jonon, Elelelelel AB',
  },
  {
    text: 'Aliquam consectetur curae vel per justo mus aenean proin nunc gravida nisi himenaeos felis lobortis morbi nascetur penatibus lectus adipiscing',
    author: 'Lil Elz, Bzzzzzzz AB',
  },
];