Does anyone have any experience using a carousel component?

[arsmth]

I need a responsive touch friendly carousel but I'm struggling to find one that's simple enough to integrate. I had Owl Carousel or Flickity in mind but I can't figure out how to use them within Gatsby.

Any help or examples would be much appreciated.

[ryanditjia]

I used to use Swiper, it’s got the best physics. You can include it in Gatsby with the React port here.

The downside is the library is huge.

If you want to use Flickity, here’s an example. It uses quite old React syntax however, and you need to modify it.

There’s a CSS implementation that feels great. But browser support isn’t great, and you need to implement the prev next pagination yourself. It’s called CSS snap points and there’s an amazing article talking about it here.

Good luck!

[bkniffler]

Since this is not directly related to gatsby, I'd recommend you go check one of the many communities out there:

• Reddit: https://reddit.com/r/react
• Reactiflux: https://www.reactiflux.com/
• StackOverflow: https://stackoverflow.com/questions/tagged/reactjs

Or at least the gatsby community:

• Discord: https://discord.gg/0ZcbPKXt5bVoxkfV
• Spectrum: https://spectrum.chat/gatsby-js
• Twitter: https://twitter.com/gatsbyjs

[arsmth]

Thanks a lot, guys. CSS snap points is great, the browser compatibility just isn't there yet, unfortunately. Swiper looks good, gonna check that out 👍

[nihgwu]

@babruix your comment is AWESOME

[rickymetz]

I used flickity in my project via the library react-flickity-component

I had some trouble getting it to build due to the ever-bothersome Window is not defined error #309.

I wasn't able to get it working using the methods described in the docs: https://www.gatsbyjs.org/docs/debugging-html-builds/

But I was able to get around it and have it successfully build with this:

import React, { Component } from 'react'
import Flickity from 'react-flickity-component'

import './flickity.css'

export default class Carousel extends Component {
  render() {
    if (typeof window !== 'undefined') {
      return (
          <Flickity>
            <img src="https://via.placeholder.com/800x400?text=Hero1" />
            <img src="https://via.placeholder.com/800x400?text=Hero2" />
            <img src="https://via.placeholder.com/800x400?text=Hero3" />
            <img src="https://via.placeholder.com/800x400?text=Hero4" />
            <img src="https://via.placeholder.com/800x400?text=Hero5" />
            <img src="https://via.placeholder.com/800x400?text=Hero6" />
          </Flickity>
      )
    }
    return null
  }
}

[yocmen]

hi @rickymetz are you doing this with the last build of Gatsby? im trying to add the carrousel on a component called on index.js but i always have the windows error, i put the windows check and nothing happens, cant make the build, im using react hooks. Thanks in advance.

[kyleaton]

@yocmen I'm currently having the same problem. Have you had any luck?

[jonniebigodes]

@yocmen and @kyleaton see if #16365 helps. It's built with react-owl-carousel and it's working.

[davidjerleke]

Hi @arsmth, @ryanditjia,

Give Embla Carousel a shot. It’s only 6.06kb gzipped:

• Examples & Documentation
• Github

Thanks!

[davidjerleke]

@yocmen, @kyleaton,

This is probably caused by the Webpack 4 UMD bundle bug. If you’re interested, read this issue one of my users opened. I had to investigate it further and solved the window issue for my carousel package, in my case Embla Carousel.

[corygibbons]

@yocmen @kyleaton Adding

const Flickity =
  typeof window !== `undefined` ? require('react-flickity-component') : null

in addition to the render() check made it work for me:

import React, { Component } from 'react'
const Flickity =
  typeof window !== `undefined` ? require('react-flickity-component') : null

export default class Carousel extends Component {
  render() {
    if (typeof window !== 'undefined') {
      return (
          <Flickity>
            <img src="https://via.placeholder.com/800x400?text=Hero1" />
            <img src="https://via.placeholder.com/800x400?text=Hero2" />
            <img src="https://via.placeholder.com/800x400?text=Hero3" />
            <img src="https://via.placeholder.com/800x400?text=Hero4" />
            <img src="https://via.placeholder.com/800x400?text=Hero5" />
            <img src="https://via.placeholder.com/800x400?text=Hero6" />
          </Flickity>
      )
    }
    return null
  }
}

[davidjerleke]

@corygibbons, @rickymetz,

That may work as a workaround but it bloats the component and the fix should be applied to the package itself.

For projects using Webpack generating an UMD bundle, one workaround is adding this to the Webpack config, where the globalObject isn’t expected to be window but rather referenced as self.

Have you opened an issue for the Flickity React package?

[davemullenjnr]

Hey @davidcetinkaya — I'm just about to start using your awesome looking Embla carousel. Will it work with Gatsby just following the docs or does it need some extra configuration? (I'm a beginner and will probably get tripped up somewhere)

[davidjerleke]

Hi Dave (@davemullenjnr),

Thank you for your question! I haven’t tried it with Gatsby myself but this Gatsby blog uses Embla Carousel so it works with Gatsby.

Good luck and let me know if you have any questions 👍🏻. I know that some of my users use Gatsby so if you get stuck just open up an issue that describes what you need help with, and we’ll just ask them for assistance 🙂.

Best, David

[davemullenjnr]

Hi David, sorry for the late reply. Just wanted to say that those links were a big help, got it working nicely around the time. I've just not had chance to carry on with it recently. Thanks again and looking forward to getting back to work with it.

[davidjerleke]

Hi Dave (@davemullenjnr),

Happy new year! And no worries. I’m glad the links helped you. Feel free to ask if you have any questions regarding Embla.

Cheers, David

[louMoxy]

@davidcetinkaya just wanted to say thanks for sharing Embla, works great with gatsby, and even accepts Gatsby image as a child component which is perfect. 👍

[davidjerleke]

Hi @louMoxy,

You’re welcome. And thank you for confirming that it works and using Embla 👍🏻.

Best, David

[ManuelFeller]

@davidcetinkaya Also thanks from me for pointing to Embla, its a really neat component. Great work; well documented, pretty straightforward use. Had no issues to get it running in Gatsby; just added the package via npm and used react example code from the Embla docs and examples.

For all coming across this issue after me - to save you a few clicks: you no longer need to install the React package for Embla since it is now part of the standard package...

[davidjerleke]

Hi @ManuelFeller,

Thanks for the appreciation. I'm glad you like Embla. I've changed the links in the comments and they should now point to the core library. Thank you for mentioning this 🙂.

Best, David

[davemullenjnr]

Hi @davidcetinkaya, I'm pleased to say that I finally launched the site I was using Embla with and it's at the top of the homepage: hoodiehut.co.uk — I just wondered if you had a remedy for the first slide initially starting on the left and then jumping to the centre when the third slide (in the loop) loads? Thanks in advance for any guidance you might have.

[davidjerleke]

Hello Dave (@davemullenjnr),

Awesome website 🎉. Thank you for sharing the link. It's always nice to see Embla in production. And thank you very much for supporting the project.

I think that's happening because there's no transform applied to the container before the Embla script runs. And when Embla initializes and applies the initial position transform, it jumps into position.

One way to solve this would be to hide the carousel until it's ready. Something along these lines should work:

useEffect(() => {
  if (!embla) return
  // Make embla visible here, because it's ready now.
  // For example, you can go from 0 to 1 opacity.
}, [embla])

I'm actually re-building the documentation website using Gatsby right now 🙂.

Let me know if it helps!

Best, David

[davemullenjnr]

Thanks @davidcetinkaya!

I appreciate you trying to help with the useEffect() tip. To be honest, I don't really even know what to put between the lines there. My javascript knowledge is pretty poor at the moment.

I've just had this snippet from the docs

  useEffect(() => {
    if (emblaApi) {
      // Embla API is ready
    }
  }, [emblaApi]);

I didn't realise I had to put something else where it says the API is ready. I have just tried the snippet you gave me but, again, I don't have a clue what sort of thing to put in the commented section. 😓

Ha, that's cool! Looking forward to seeing the new docs when it's done!

[davidjerleke]

Hello again Dave (@davemullenjnr),

I'd be happy to help but I don't think it's appropriate to do it here. You're welcome to open up a new issue here instead. In order for me to help you I need too see your carousel setup.

I'll let you know when the new docs is up and running 🙂.

Best, David