ImageSlider

Demos

Default

Fullscreen
import { Image, ImageSlider, ImageSliderItem } from 'marketing-ui'

function Demo() {
  return (
    <ImageSlider
      tagline='Gallery'
      copy='A closer look at the product in use.'
    >
      {new Array(6).fill(1).map(() => {
        return (
          <ImageSliderItem>
            <Image
              data-image-size='richtext-media-image'
              src='https://res.cloudinary.com/sonax-gmbh/image/fetch/v1762172882/https://images.ctfassets.net/myziqoe43fa7/3x7j6lwUucmP3jRnXenksG/84dd8cbd5a91de69ce6d72b16cefde94/SNX__GREENFORREST__LANDING.png'
            />
          </ImageSliderItem>
        )
      })}
    </ImageSlider>
  )
}

export default Demo

Without header

Fullscreen
import { Image, ImageSlider, ImageSliderItem } from 'marketing-ui'

function Demo() {
  return (
    <ImageSlider>
      {new Array(6).fill(1).map(() => {
        return (
          <ImageSliderItem>
            <Image
              data-image-size='richtext-media-image'
              src='https://res.cloudinary.com/sonax-gmbh/image/fetch/v1762172882/https://images.ctfassets.net/myziqoe43fa7/3x7j6lwUucmP3jRnXenksG/84dd8cbd5a91de69ce6d72b16cefde94/SNX__GREENFORREST__LANDING.png'
            />
          </ImageSliderItem>
        )
      })}
    </ImageSlider>
  )
}

export default Demo

Props