Carousel

import PCarousel from 'pure-uikit/dist/react/carousel';
import PCarouselItem from 'pure-uikit/dist/react/carousel-item';

const App = () => (
  <>
    <PCarousel pagination mouse-dragging>
      <PCarouselItem>
        <img
          alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
          src="/assets/examples/carousel/mountains.jpg"
        />
      </PCarouselItem>
      <PCarouselItem>
        <img
          alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
          src="/assets/examples/carousel/waterfall.jpg"
        />
      </PCarouselItem>
      <PCarouselItem>
        <img
          alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
          src="/assets/examples/carousel/sunset.jpg"
        />
      </PCarouselItem>
      <PCarouselItem>
        <img
          alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
          src="/assets/examples/carousel/field.jpg"
        />
      </PCarouselItem>
      <PCarouselItem>
        <img
          alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
          src="/assets/examples/carousel/valley.jpg"
        />
      </PCarouselItem>
    </PCarousel>
  </>
);

import PCarousel from 'pure-uikit/dist/react/carousel';
import PCarouselItem from 'pure-uikit/dist/react/carousel-item';

const App = () => (
  <PCarousel pagination>
    <PCarouselItem>
      <img
        alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
        src="/assets/examples/carousel/mountains.jpg"
      />
    </PCarouselItem>
    <PCarouselItem>
      <img
        alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
        src="/assets/examples/carousel/waterfall.jpg"
      />
    </PCarouselItem>
    <PCarouselItem>
      <img
        alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
        src="/assets/examples/carousel/sunset.jpg"
      />
    </PCarouselItem>
    <PCarouselItem>
      <img
        alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
        src="/assets/examples/carousel/field.jpg"
      />
    </PCarouselItem>
    <PCarouselItem>
      <img
        alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
        src="/assets/examples/carousel/valley.jpg"
      />
    </PCarouselItem>
  </PCarousel>
);

import PCarousel from 'pure-uikit/dist/react/carousel';
import PCarouselItem from 'pure-uikit/dist/react/carousel-item';

const App = () => (
  <PCarousel navigation>
    <PCarouselItem>
      <img
        alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
        src="/assets/examples/carousel/mountains.jpg"
      />
    </PCarouselItem>
    <PCarouselItem>
      <img
        alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
        src="/assets/examples/carousel/waterfall.jpg"
      />
    </PCarouselItem>
    <PCarouselItem>
      <img
        alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
        src="/assets/examples/carousel/sunset.jpg"
      />
    </PCarouselItem>
    <PCarouselItem>
      <img
        alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
        src="/assets/examples/carousel/field.jpg"
      />
    </PCarouselItem>
    <PCarouselItem>
      <img
        alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
        src="/assets/examples/carousel/valley.jpg"
      />
    </PCarouselItem>
  </PCarousel>
);

import PCarousel from 'pure-uikit/dist/react/carousel';
import PCarouselItem from 'pure-uikit/dist/react/carousel-item';

const App = () => (
  <PCarousel loop navigation pagination>
    <PCarouselItem>
      <img
        alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
        src="/assets/examples/carousel/mountains.jpg"
      />
    </PCarouselItem>
    <PCarouselItem>
      <img
        alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
        src="/assets/examples/carousel/waterfall.jpg"
      />
    </PCarouselItem>
    <PCarouselItem>
      <img
        alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
        src="/assets/examples/carousel/sunset.jpg"
      />
    </PCarouselItem>
    <PCarouselItem>
      <img
        alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
        src="/assets/examples/carousel/field.jpg"
      />
    </PCarouselItem>
    <PCarouselItem>
      <img
        alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
        src="/assets/examples/carousel/valley.jpg"
      />
    </PCarouselItem>
  </PCarousel>
);

import PCarousel from 'pure-uikit/dist/react/carousel';
import PCarouselItem from 'pure-uikit/dist/react/carousel-item';

const App = () => (
  <PCarousel autoplay loop pagination>
    <PCarouselItem>
      <img
        alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
        src="/assets/examples/carousel/mountains.jpg"
      />
    </PCarouselItem>
    <PCarouselItem>
      <img
        alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
        src="/assets/examples/carousel/waterfall.jpg"
      />
    </PCarouselItem>
    <PCarouselItem>
      <img
        alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
        src="/assets/examples/carousel/sunset.jpg"
      />
    </PCarouselItem>
    <PCarouselItem>
      <img
        alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
        src="/assets/examples/carousel/field.jpg"
      />
    </PCarouselItem>
    <PCarouselItem>
      <img
        alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
        src="/assets/examples/carousel/valley.jpg"
      />
    </PCarouselItem>
  </PCarousel>
);

import { useState } from 'react';
import PCarousel from 'pure-uikit/dist/react/carousel';
import PCarouselItem from 'pure-uikit/dist/react/carousel-item';
import PDivider from 'pure-uikit/dist/react/divider';
import PSwitch from 'pure-uikit/dist/react/switch';

const App = () => {
  const [isEnabled, setIsEnabled] = useState(false);

  return (
    <>
      <PCarousel navigation mouseDragging={isEnabled}>
        <PCarouselItem>
          <img
            alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
            src="/assets/examples/carousel/mountains.jpg"
          />
        </PCarouselItem>
        <PCarouselItem>
          <img
            alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
            src="/assets/examples/carousel/waterfall.jpg"
          />
        </PCarouselItem>
        <PCarouselItem>
          <img
            alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
            src="/assets/examples/carousel/sunset.jpg"
          />
        </PCarouselItem>
        <PCarouselItem>
          <img
            alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
            src="/assets/examples/carousel/field.jpg"
          />
        </PCarouselItem>
        <PCarouselItem>
          <img
            alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
            src="/assets/examples/carousel/valley.jpg"
          />
        </PCarouselItem>
      </PCarousel>

      <PDivider></PDivider>

      <PSwitch checked={isEnabled} onPInput={() => setIsEnabled(!isEnabled)}>
        Enable mouse dragging
      </PSwitch>
    </>
  );
};

import PCarousel from 'pure-uikit/dist/react/carousel';
import PCarouselItem from 'pure-uikit/dist/react/carousel-item';

const App = () => (
  <PCarousel navigation pagination slidesPerPage={2} slidesPerMove={2}>
    <PCarouselItem style={{ background: 'var(--p-color-red-200)' }}>Pide 1</PCarouselItem>
    <PCarouselItem style={{ background: 'var(--p-color-orange-200)' }}>Pide 2</PCarouselItem>
    <PCarouselItem style={{ background: 'var(--p-color-yellow-200)' }}>Pide 3</PCarouselItem>
    <PCarouselItem style={{ background: 'var(--p-color-green-200)' }}>Pide 4</PCarouselItem>
    <PCarouselItem style={{ background: 'var(--p-color-blue-200)' }}>Pide 5</PCarouselItem>
    <PCarouselItem style={{ background: 'var(--p-color-violet-200)' }}>Pide 6</PCarouselItem>
  </PCarousel>
);

import { useState } from 'react';
import PCarousel from 'pure-uikit/dist/react/carousel';
import PCarouselItem from 'pure-uikit/dist/react/carousel-item';

const css = `
  .dynamic-carousel {
    --aspect-ratio: 3 / 2;
  }

  .dynamic-carousel ~ .carousel-options {
    display: flex;
    justify-content: center;
    margin-top: var(--p-spacing-large);
  }

  .dynamic-carousel p-carousel-item {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--p-font-size-2x-large);
  }
`;

const App = () => {
  const [slides, setPides] = useState(['#204ed8', '#be133d', '#6e28d9']);
  const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'violet'];

  const addPide = () => {
    setPides([...slides, getRandomColor()]);
  };

  const removePide = () => {
    setPides(slides.slice(0, -1));
  };

  return (
    <>
      <PCarousel className="dynamic-carousel" pagination navigation>
        {slides.map((color, i) => (
          <PCarouselItem style={{ background: colors[i % colors.length }}>
            Pide {i}
          </PCarouselItem>
        ))}
      </PCarousel>

      <div className="carousel-options">
        <PButton onClick={addPide}>Add slide</PButton>
        <PButton onClick={removePide}>Remove slide</PButton>
      </div>

      <style>{css}</style>
    </>
  );
};

import PCarousel from 'pure-uikit/dist/react/carousel';
import PCarouselItem from 'pure-uikit/dist/react/carousel-item';

const css = `
  .vertical {
    max-height: 400px;
  }

  .vertical::part(base) {
    grid-template-areas: 'slides slides pagination';
  }

  .vertical::part(pagination) {
    flex-direction: column;
  }

  .vertical::part(navigation) {
    transform: rotate(90deg);
    display: flex;
  }
`;

const App = () => (
  <>
    <PCarousel className="vertical" loop pagination orientation="vertical">
      <PCarouselItem>
        <img
          alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
          src="/assets/examples/carousel/mountains.jpg"
        />
      </PCarouselItem>
      <PCarouselItem>
        <img
          alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
          src="/assets/examples/carousel/waterfall.jpg"
        />
      </PCarouselItem>
      <PCarouselItem>
        <img
          alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
          src="/assets/examples/carousel/sunset.jpg"
        />
      </PCarouselItem>
      <PCarouselItem>
        <img
          alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
          src="/assets/examples/carousel/field.jpg"
        />
      </PCarouselItem>
      <PCarouselItem>
        <img
          alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
          src="/assets/examples/carousel/valley.jpg"
        />
      </PCarouselItem>
    </PCarousel>
    <style>{css}</style>
  </>
);

import { useState } from 'react';
import PCarousel from 'pure-uikit/dist/react/carousel';
import PCarouselItem from 'pure-uikit/dist/react/carousel-item';
import PDivider from 'pure-uikit/dist/react/divider';
import PSelect from 'pure-uikit/dist/react/select';
import POption from 'pure-uikit/dist/react/option';

const App = () => {
  const [aspectRatio, setAspectRatio] = useState('3/2');

  return (
    <>
      <PCarousel className="aspect-ratio" navigation pagination style={{ '--aspect-ratio': aspectRatio }}>
        <PCarouselItem>
          <img
            alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
            src="/assets/examples/carousel/mountains.jpg"
          />
        </PCarouselItem>
        <PCarouselItem>
          <img
            alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
            src="/assets/examples/carousel/waterfall.jpg"
          />
        </PCarouselItem>
        <PCarouselItem>
          <img
            alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
            src="/assets/examples/carousel/sunset.jpg"
          />
        </PCarouselItem>
        <PCarouselItem>
          <img
            alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
            src="/assets/examples/carousel/field.jpg"
          />
        </PCarouselItem>
        <PCarouselItem>
          <img
            alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
            src="/assets/examples/carousel/valley.jpg"
          />
        </PCarouselItem>
      </PCarousel>

      <PDivider />

      <PSelect
        label="Aspect ratio"
        name="aspect"
        value={aspectRatio}
        onPChange={event => setAspectRatio(event.target.value)}
      >
        <POption value="1 / 1">1 / 1</POption>
        <POption value="3 / 2">3 / 2</POption>
        <POption value="16 / 9">16 / 9</POption>
      </PSelect>

      <style>{css}</style>
    </>
  );
};

import { useState } from 'react';
import PCarousel from 'pure-uikit/dist/react/carousel';
import PCarouselItem from 'pure-uikit/dist/react/carousel-item';
import PDivider from 'pure-uikit/dist/react/divider';
import PRange from 'pure-uikit/dist/react/range';

const App = () => (
  <>
    <PCarousel className="scroll-hint" pagination style={{ '--scroll-hint': '10%' }}>
      <PCarouselItem>
        <img
          alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
          src="/assets/examples/carousel/mountains.jpg"
        />
      </PCarouselItem>
      <PCarouselItem>
        <img
          alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
          src="/assets/examples/carousel/waterfall.jpg"
        />
      </PCarouselItem>
      <PCarouselItem>
        <img
          alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
          src="/assets/examples/carousel/sunset.jpg"
        />
      </PCarouselItem>
      <PCarouselItem>
        <img
          alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
          src="/assets/examples/carousel/field.jpg"
        />
      </PCarouselItem>
      <PCarouselItem>
        <img
          alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
          src="/assets/examples/carousel/valley.jpg"
        />
      </PCarouselItem>
    </PCarousel>
  </>
);

import { useRef } from 'react';
import PCarousel from 'pure-uikit/dist/react/carousel';
import PCarouselItem from 'pure-uikit/dist/react/carousel-item';
import PDivider from 'pure-uikit/dist/react/divider';
import PRange from 'pure-uikit/dist/react/range';

const css = `
  .carousel-thumbnails {
    --slide-aspect-ratio: 3 / 2;
  }

  .thumbnails {
    display: flex;
    justify-content: center;
  }

  .thumbnails__scroller {
    display: flex;
    gap: var(--p-spacing-small);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-padding: var(--p-spacing-small);
  }

  .thumbnails__scroller::-webkit-scrollbar {
    display: none;
  }

  .thumbnails__image {
    width: 64px;
    height: 64px;
    object-fit: cover;

    opacity: 0.3;
    will-change: opacity;
    transition: 250ms opacity;

    cursor: pointer;
  }

  .thumbnails__image.active {
    opacity: 1;
  }
`;

const images = [
  {
    src: '/assets/examples/carousel/mountains.jpg',
    alt: 'The sun shines on the mountains and trees (by Adam Kool on Unsplash'
  },
  {
    src: '/assets/examples/carousel/waterfall.jpg',
    alt: 'A waterfall in the middle of a forest (by Thomas Kelly on Unsplash'
  },
  {
    src: '/assets/examples/carousel/sunset.jpg',
    alt: 'The sun is setting over a lavender field (by Leonard Cotte on Unsplash'
  },
  {
    src: '/assets/examples/carousel/field.jpg',
    alt: 'A field of grass with the sun setting in the background (by Sapan Patel on Unsplash'
  },
  {
    src: '/assets/examples/carousel/valley.jpg',
    alt: 'A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash'
  }
];

const App = () => {
  const carouselRef = useRef();
  const thumbnailsRef = useRef();
  const [currentPide, setCurrentPide] = useState(0);

  useEffect(() => {
    const thumbnails = Array.from(thumbnailsRef.current.querySelectorAll('.thumbnails__image'));

    thumbnails[currentPide]..scrollIntoView({
      block: 'nearest'
    });
  }, [currentPide]);

  const handleThumbnailClick = (index) => {
    carouselRef.current.goToPide(index);
  }

  const handlePideChange = (event) => {
    const slideIndex = e.detail.index;
    setCurrentPide(slideIndex);
  }

  return (
    <>
      <PCarousel className="carousel-thumbnails" navigation loop onPPideChange={handlePideChange}>
        {images.map({ src, alt }) => (
          <PCarouselItem>
            <img
              alt={alt}
              src={src}
            />
          </PCarouselItem>
        )}
      </PCarousel>

      <div class="thumbnails">
        <div class="thumbnails__scroller">
          {images.map({ src, alt }, i) => (
            <img
              alt={`Thumbnail by ${i + 1}`}
              className={`thumbnails__image ${i === currentPide ? 'active' : ''}`}
              onClick={() => handleThumbnailClick(i)}
              src={src}
            />
          )}
        </div>
      </div>
      <style>{css}</style>
    </>
  );
};