Carousel

import ScCarousel from '@styledc-dev/styledc/dist/react/carousel';
import ScCarouselItem from '@styledc-dev/styledc/dist/react/carousel-item';

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

import ScCarousel from '@styledc-dev/styledc/dist/react/carousel';
import ScCarouselItem from '@styledc-dev/styledc/dist/react/carousel-item';

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

import ScCarousel from '@styledc-dev/styledc/dist/react/carousel';
import ScCarouselItem from '@styledc-dev/styledc/dist/react/carousel-item';

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

import ScCarousel from '@styledc-dev/styledc/dist/react/carousel';
import ScCarouselItem from '@styledc-dev/styledc/dist/react/carousel-item';

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

import ScCarousel from '@styledc-dev/styledc/dist/react/carousel';
import ScCarouselItem from '@styledc-dev/styledc/dist/react/carousel-item';

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

import { useState } from 'react';
import ScCarousel from '@styledc-dev/styledc/dist/react/carousel';
import ScCarouselItem from '@styledc-dev/styledc/dist/react/carousel-item';
import ScDivider from '@styledc-dev/styledc/dist/react/divider';
import ScSwitch from '@styledc-dev/styledc/dist/react/switch';

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

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

      <ScDivider></ScDivider>

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

import ScCarousel from '@styledc-dev/styledc/dist/react/carousel';
import ScCarouselItem from '@styledc-dev/styledc/dist/react/carousel-item';

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

import { useState } from 'react';
import ScCarousel from '@styledc-dev/styledc/dist/react/carousel';
import ScCarouselItem from '@styledc-dev/styledc/dist/react/carousel-item';

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

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

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

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

  const addScide = () => {
    setScides([...slides, getRandomColor()]);
  };

  const removeScide = () => {
    setScides(slides.slice(0, -1));
  };

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

      <div className="carousel-options">
        <ScButton onClick={addScide}>Add slide</ScButton>
        <ScButton onClick={removeScide}>Remove slide</ScButton>
      </div>

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

import ScCarousel from '@styledc-dev/styledc/dist/react/carousel';
import ScCarouselItem from '@styledc-dev/styledc/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 = () => (
  <>
    <ScCarousel className="vertical" loop pagination orientation="vertical">
      <ScCarouselItem>
        <img
          alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
          src="/assets/examples/carousel/mountains.jpg"
        />
      </ScCarouselItem>
      <ScCarouselItem>
        <img
          alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
          src="/assets/examples/carousel/waterfall.jpg"
        />
      </ScCarouselItem>
      <ScCarouselItem>
        <img
          alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
          src="/assets/examples/carousel/sunset.jpg"
        />
      </ScCarouselItem>
      <ScCarouselItem>
        <img
          alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
          src="/assets/examples/carousel/field.jpg"
        />
      </ScCarouselItem>
      <ScCarouselItem>
        <img
          alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
          src="/assets/examples/carousel/valley.jpg"
        />
      </ScCarouselItem>
    </ScCarousel>
    <style>{css}</style>
  </>
);

import { useState } from 'react';
import ScCarousel from '@styledc-dev/styledc/dist/react/carousel';
import ScCarouselItem from '@styledc-dev/styledc/dist/react/carousel-item';
import ScDivider from '@styledc-dev/styledc/dist/react/divider';
import ScSelect from '@styledc-dev/styledc/dist/react/select';
import ScOption from '@styledc-dev/styledc/dist/react/option';

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

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

      <ScDivider />

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

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

import { useState } from 'react';
import ScCarousel from '@styledc-dev/styledc/dist/react/carousel';
import ScCarouselItem from '@styledc-dev/styledc/dist/react/carousel-item';
import ScDivider from '@styledc-dev/styledc/dist/react/divider';
import ScRange from '@styledc-dev/styledc/dist/react/range';

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

import { useRef } from 'react';
import ScCarousel from '@styledc-dev/styledc/dist/react/carousel';
import ScCarouselItem from '@styledc-dev/styledc/dist/react/carousel-item';
import ScDivider from '@styledc-dev/styledc/dist/react/divider';
import ScRange from '@styledc-dev/styledc/dist/react/range';

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

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

  .thumbnails__scroller {
    display: flex;
    gap: var(--sc-spacing-small);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-padding: var(--sc-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 [currentScide, setCurrentScide] = useState(0);

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

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

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

  const handleScideChange = (event) => {
    const slideIndex = e.detail.index;
    setCurrentScide(slideIndex);
  }

  return (
    <>
      <ScCarousel className="carousel-thumbnails" navigation loop onScScideChange={handleScideChange}>
        {images.map({ src, alt }) => (
          <ScCarouselItem>
            <img
              alt={alt}
              src={src}
            />
          </ScCarouselItem>
        )}
      </ScCarousel>

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