Adding a `visible={visible}` prop such as `react-viewer` have for displaying the carousel and closing it.

[virusxd521]

Summary

Adding a visible={visible} prop such as react-viewer have for displaying the carousel and closing it.

Basic example

          const [visible, setVisible] = useState(false);

          <LightGallery plugins={[lgZoom, lgVideo]} mode="lg-fade" visible={visible} 
          onClose={() => {
            setVisible(false);
          }}>
            <a
              data-lg-size="1406-1390"
              className="gallery-item"
              data-src="https://images.unsplash.com/photo-1581894158358-5ecd2c518883?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1406&q=80"
              data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@entrycube' >Diego Guzmán </a></h4> <p> Location - <a href='https://unsplash.com/s/photos/fushimi-inari-taisha-shrine-senbontorii%2C-68%E7%95%AA%E5%9C%B0-fukakusa-yabunouchicho%2C-fushimi-ward%2C-kyoto%2C-japan'>Fushimi Ward, Kyoto, Japan</a></p>"
            >
              <img
                className="img-responsive"
                src="https://images.unsplash.com/photo-1581894158358-5ecd2c518883?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80"
              />
            </a>
          </LightGallery>

Motivation

I would like to be able to open and close the carousel when clicking a button such as 'Show carousel' meanwhile hiding the grid while the carousel is close.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.