Anyone embedded a React image gallery into Plasmic?

Developer Support
1

Hi has anybody successfully embeded one of the react image galleries on a plasmic page?

so far ive tried these 2 and no luck

react-lightbox-gallery
react-responsive-carousel

import * as React from "react";
var Carousel = require('react-responsive-carousel').Carousel;
import { PlasmicImageGallery } from "./plasmic/normangershman_com/PlasmicImageGallery";

function ImageGallery_(props, ref) {

  return <PlasmicImageGallery>
      <Carousel showArrows={true} onChange={onChange} onClickItem={onClickItem} onClickThumb={onClickThumb}>
                <div>
                    <img src="<https://images.unsplash.com/photo-1577279549270-b9e297533cdd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80>" />
                    <p className="legend">Legend 1</p>
                </div>
                <div>
                    <img src="<https://images.unsplash.com/photo-1577277625082-36df4915ebeb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80>" />
                    <p className="legend">Legend 2</p>
                </div>
            </Carousel>
  </PlasmicImageGallery>
}

const ImageGallery = React.forwardRef(ImageGallery_);

export default ImageGallery;

example of what I’m hoping to do :point_up: thx

2

What is the issue you are encountering?

3

Just in case you aren’t aware, there’s also react slick built into the plasmic components store. You can take a look at how that one works in the GitHub repo as well if you’re curious

4

if you mean slick.js thats very cool, the errors I got were around the fact that the project was react 18 and dependencies didn’t want above 16 or 17

5

I was more interested in if someone else had done something like my goal… not looking for anybody to debug my code :slightly_smiling_face:

6

Got it, yeah, in that case you can check out the slick example! And yeah react slick is built on top of slick js