<FadeSlider />

The FadeSlider component which comes with the starter theme is a great starting point for simple carousels.

It's somewhat flexible, but it's easy enough to edit and customise for your needs if it's not doing what you want!

There are 3 exports from sliders/FadeSlider.tsx:

• FadeSlider, the actual slider component
• FadeSlider.NavButton, a button which can be used to navigate to the next or previous slide
• useFadeSlider(), a hook for reading and updating slider state from within slides and the overlay.

Demo#

API#

Styling#

Some default styles are provided:

• The slider is, by default, 100% wide and 400px high. You'll probably want to adjust the height!
• Each slide is 100% width/height of the slide container
• The standard next/back buttons have default arrow icons, and are just white boxes.

You essentially have two options for styling the slider:

• Edit the FadeSlider.tsx file directly in your codebase (recommend duplicating it first in most cases)
• Use styled to style the FadeSlider and FadeSlider.NavButton components.

Option 2 looks something like this:

import { FadeSlider } from "@components/sliders/FadeSlider"

const StyledSlider = styled(FadeSlider, {
  height: "50vw",
  border: "2px solid black",
  borderRadius: "$sm",
})

const StyledNavButton = styled(FadeSlider.NavButton, {
  backgroundColor: "red",
  width: "50px",
  height: "50px",
})

Usage Example#

import { FadeSlider } from "@components/carousel/FadeSlider"
import { styled } from "@theme"
import { AnimatePresence, motion } from "framer-motion"

// Styling the slider itself to give it a width and height
// In this case, just maximum viewport
const Slider = styled(FadeSlider, {
  height: "100vh",
  width: "100vw",
})

// Style for our single slides
const SlideImage = styled("div", {
  position: "absolute",
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  img: {
    width: "100%",
    height: "100%",
    position: "absolute",
    objectFit: "cover",
    objectPosition: "center",
  },
})

// Container for the NavButtons
const Arrows = styled("div", {
  display: "grid",
  gridTemplateColumns: "auto auto",
  gridGap: "$2",
  position: "absolute",
  left: "$6",
  bottom: "$6",
})

// Custom style on the NavButton for previous/next
const ArrowButton = styled(FadeSlider.NavButton, {
  appearance: "none",
  borderRadius: "$sm",
})

// Styles for the little clickable dots
const Indicators = styled("div", {
  position: "absolute",
  right: "$6",
  bottom: "$6",
  display: "flex",
  button: {
    appearance: "none",
    border: 0,
    background: "white",
    width: 20,
    height: 20,
    display: "block",
    marginLeft: "$2",
    borderRadius: "100px",
    opacity: 0.5,
    "&:disabled": {
      opacity: 1,
    },
  },
})

// Some dummy data — this can be anything!
const SLIDES = [
  {
    src: "/wp-content/uploads/2022/06/photo-1434725039720-aaad6dd32dfe-scaled.jpg",
  },
  {
    src: "/wp-content/uploads/2022/06/photo-1532274402911-5a369e4c4bb5-scaled.jpg",
  },
  {
    src: "/wp-content/uploads/2022/06/photo-1511884642898-4c92249e20b6-scaled.jpg",
  },
  {
    src: "/wp-content/uploads/2022/06/photo-1506744038136-46273834b3fb-scaled.jpg",
  },
]

export function FadeSliderExample() {
  return (
    <Slider
      autoplay
      slides={SLIDES.map((slide) => (
        <SlideImage>
          <img src={slide.src} />
        </SlideImage>
      ))}
      overlay={(slider) => (
        <>
          <Arrows>
            <ArrowButton direction="prev" />
            <ArrowButton direction="next" />
          </Arrows>
          <Indicators>
            {SLIDES.map((slide, index) => (
              <button disabled={index === slider.activeIndex} onClick={() => slider.goToSlide(index)} />
            ))}
          </Indicators>
        </>
      )}
    />
  )
}