Carousels

We recommend using a lightweight React carousel with minimal dependencies.

For example, React Responsive Carousel is only 8.4kb after gzipping, and should be customisable enough for most applications.

Begin by making the slide images available in your JS by using Homeflow.set() and include_as_json in a liquid template (the example here is for a carousel for the homepage):

<script>

Homeflow.set('carouselItems', {% include_as_json data/home_carousel_items %});

</script>

See the Configuration section for more detail on setting data this way.

You could create your React carousel:

import React from 'react';

import { Carousel } from 'react-responsive-carousel';

import 'react-responsive-carousel/lib/styles/carousel.min.css';

const HomeCarousel = ({ items }) => (

<Carousel

autoPlay

interval={8000}

renderThumbs={() => null}

>

{items.map(item => (

<div key={item.imageSmall} className="slide" style={{ height: '100vh' }}>

<img

className="lazyload"

data-srcset={`

${item.imageLarge} 1920w,

${item.imageTiny} 768w,

`}

data-sizes="auto"

alt={item.title}

style={{ height: '100%', width: '100%', objectFit: 'cover' }}

/>

{item.title && <p className="legend">{item.title}</p>}

</div>

))}

</Carousel>

);

export default HomeCarousel;

...and pass the items as a prop when you render it:

const items = Homeflow.get('carouselItems');

ReactDOM.render(

<HomeCarousel items={items} />,

document.getElementById('home-carousel'),

);