React carousel image gallery component with thumbnail support 🖼

Overview

React Carousel Image Gallery

npm version Download Count

Live Demo (try it on mobile for swipe support)

linxtion.com/demo/react-image-gallery

demo gif

React image gallery is a React component for building image galleries and carousels

Features

  • Mobile swipe gestures
  • Thumbnail navigation
  • Fullscreen support
  • Custom rendered slides
  • RTL support
  • Responsive design
  • Tons of customization options (see props below)
  • Lightweight ~7kb gzipped

Getting started

React Image Gallery requires React 16.0.0 or later.

npm install react-image-gallery

Style import (with webpack)

# SCSS
@import "~react-image-gallery/styles/scss/image-gallery.scss";

# CSS
@import "~react-image-gallery/styles/css/image-gallery.css";

Example

Need more example? See example/app.js

import ImageGallery from 'react-image-gallery';

const images = [
  {
    original: 'https://picsum.photos/id/1018/1000/600/',
    thumbnail: 'https://picsum.photos/id/1018/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1015/1000/600/',
    thumbnail: 'https://picsum.photos/id/1015/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1019/1000/600/',
    thumbnail: 'https://picsum.photos/id/1019/250/150/',
  },
];

class MyGallery extends React.Component {
  render() {
    return <ImageGallery items={images} />;
  }
}

Props

  • items: (required) Array of objects, see example above,

    • Available Properties
      • original - image src url
      • thumbnail - image thumbnail src url
      • fullscreen - image for fullscreen (defaults to original)
      • height - image height (html5 attribute)
      • width - image width (html5 attribute)
      • originalClass - custom image class
      • thumbnailClass - custom thumbnail class
      • renderItem - Function for custom renderer (see renderItem below)
      • renderThumbInner - Function for custom thumbnail renderer (see renderThumbInner below)
      • originalAlt - image alt
      • thumbnailAlt - thumbnail image alt
      • originalTitle - image title
      • thumbnailTitle - thumbnail image title
      • thumbnailLabel - label for thumbnail
      • description - description for image
      • imageSet - array of <source> using <picture> element (see app.js for example)
      • srcSet - image srcset (html5 attribute)
      • sizes - image sizes (html5 attribute)
      • bulletClass - extra class for the bullet of the item
      • bulletOnClick - callback({item, itemIndex, currentIndex})
        • A function that will be called upon bullet click.
  • infinite: Boolean, default true

    • infinite sliding
  • lazyLoad: Boolean, default false

  • showNav: Boolean, default true

  • showThumbnails: Boolean, default true

  • thumbnailPosition: String, default bottom

    • available positions: top, right, bottom, left
  • showFullscreenButton: Boolean, default true

  • useBrowserFullscreen: Boolean, default true

    • if false, fullscreen will be done via css within the browser
  • useTranslate3D: Boolean, default true

    • if false, will use translate instead of translate3d css property to transition slides
  • showPlayButton: Boolean, default true

  • isRTL: Boolean, default false

    • if true, gallery's direction will be from right-to-left (to support right-to-left languages)
  • showBullets: Boolean, default false

  • showIndex: Boolean, default false

  • autoPlay: Boolean, default false

  • disableThumbnailScroll: Boolean, default false

    • disables the thumbnail container from adjusting
  • disableKeyDown: Boolean, default false

    • disables keydown listener for keyboard shortcuts (left arrow, right arrow, esc key)
  • disableSwipe: Boolean, default false

  • onErrorImageURL: String, default undefined

    • an image src pointing to your default image if an image fails to load
    • handles both slide image, and thumbnail image
  • indexSeparator: String, default ' / ', ignored if showIndex is false

  • slideDuration: Number, default 450

    • transition duration during image slide in milliseconds
  • swipingTransitionDuration: Number, default 0

    • transition duration while swiping in milliseconds
  • slideInterval: Number, default 3000

  • slideOnThumbnailOver: Boolean, default false

  • flickThreshold: Number (float), default 0.4

    • Determines the max velocity of a swipe before it's considered a flick (lower = more sensitive)
  • swipeThreshold: Number, default 30

    • A percentage of how far the offset of the current slide is swiped to trigger a slide event. e.g. If the current slide is swiped less than 30% to the left or right, it will not trigger a slide event.
  • stopPropagation: Boolean, default false

    • Automatically calls stopPropagation on all 'swipe' events.
  • preventDefaultTouchmoveEvent: Boolean, default false

    • An option to prevent the browser's touchmove event (stops the gallery from scrolling up or down when swiping)
  • startIndex: Number, default 0

  • onImageError: Function, callback(event)

    • overrides onErrorImage
  • onThumbnailError: Function, callback(event)

    • overrides onErrorImage
  • onThumbnailClick: Function, callback(event, index)

  • onImageLoad: Function, callback(event)

  • onSlide: Function, callback(currentIndex)

  • onBeforeSlide: Function, callback(nextIndex)

  • onScreenChange: Function, callback(boolean)

    • When fullscreen is toggled a boolean is passed to the callback
  • onPause: Function, callback(currentIndex)

  • onPlay: Function, callback(currentIndex)

  • onClick: Function, callback(event)

  • onTouchMove: Function, callback(event) on gallery slide

  • onTouchEnd: Function, callback(event) on gallery slide

  • onTouchStart: Function, callback(event) on gallery slide

  • onMouseOver: Function, callback(event) on gallery slide

  • onMouseLeave: Function, callback(event) on gallery slide

  • additionalClass: String,

    • Additional class that will be added to the root node of the component.
  • renderCustomControls: Function, custom controls rendering

    • Use this to render custom controls or other elements on the currently displayed image (like the fullscreen button)
      _renderCustomControls() {
        return <a href='' className='image-gallery-custom-action' onClick={this._customAction.bind(this)}/>
      }
  • renderItem: Function, custom item rendering

    • On a specific item [{thumbnail: '...', renderItem: this.myRenderItem}] or
    • As a prop passed into ImageGallery to completely override _renderItem, see source for reference
  • renderThumbInner: Function, custom thumbnail rendering

    • On a specific item [{thumbnail: '...', renderThumbInner: this.myRenderThumbInner}] or
    • As a prop passed into ImageGallery to completely override _renderThumbInner, see source for reference
  • renderLeftNav: Function, custom left nav component

    • Use this to render a custom left nav control
    • Passes onClick callback that will slide to the previous item and disabled argument for when to disable the nav
      renderLeftNav(onClick, disabled) {
        return (
          <button
            className='image-gallery-custom-left-nav'
            disabled={disabled}
            onClick={onClick}/>
        )
      }
  • renderRightNav: Function, custom right nav component

    • Use this to render a custom right nav control
    • Passes onClick callback that will slide to the next item and disabled argument for when to disable the nav
      renderRightNav(onClick, disabled) {
        return (
          <button
            className='image-gallery-custom-right-nav'
            disabled={disabled}
            onClick={onClick}/>
        )
      }
  • renderPlayPauseButton: Function, play pause button component

    • Use this to render a custom play pause button
    • Passes onClick callback that will toggle play/pause and isPlaying argument for when gallery is playing
      renderPlayPauseButton: (onClick, isPlaying) => {
        return (
          <button
            type='button'
            className={
              `image-gallery-play-button${isPlaying ? ' active' : ''}`}
            onClick={onClick}
          />
        );
      }
  • renderFullscreenButton: Function, custom fullscreen button component

    • Use this to render a custom fullscreen button
    • Passes onClick callback that will toggle fullscreen and isFullscreen argument for when fullscreen is active
      renderFullscreenButton: (onClick, isFullscreen) => {
        return (
          <button
            type='button'
            className={
              `image-gallery-fullscreen-button${isFullscreen ? ' active' : ''}`}
            onClick={onClick}
          />
        );
      },
  • useWindowKeyDown: Boolean, default true

    • If false, keydown events will be listened for on the image gallery

Functions

The following functions can be accessed using refs

  • play(): plays the slides
  • pause(): pauses the slides
  • fullScreen(): activates full screen
  • exitFullScreen(): deactivates full screen
  • slideToIndex(index): slides to a specific index
  • getCurrentIndex(): returns the current index

Contributing

Each PR should be specific and isolated to the issue you're trying to fix. Please do not stack features/chores/refactors/enhancements in one PR. Describe your feature/implementation in the PR. If you're unsure its useful or if it is a major change, please open an issue first and get feedback.

  • Follow eslint provided
  • Comment your code
  • Write clean code

Build the example locally

git clone https://github.com/xiaolin/react-image-gallery.git
cd react-image-gallery
npm install
npm start

Then open localhost:8001 in a browser.

License

MIT

Issues
  • how to set the image height

    how to set the image height

    when the pixels of the image is too large,how can I set the height and width of the image to fit the screen of the computer,looking forward to your answer,thankeyou very much!

    question 
    opened by Jasminff 17
  • Lazy loading multiple images from random points of the array?

    Lazy loading multiple images from random points of the array?

    I have noticed that when I click the arrows for the next/prev slide there are multiple images loading in. I have tried to make sense of it because I am sure that there is a reason for it.

    Currently on first click I have the next slide loading (which I would expect) then 2 images from the end of the images array. Then on the 2nd click I have the same but 2 images from the start and end of the array, then the next click (3rd) its also getting 2 images for the slide 2 previous to the current slide. Then that happens going forward.

    I hope this makes sense? I have included some screen shots to maybe help you to better understand this issue.

    First click Screen Shot 2019-05-16 at 12 57 41

    Second click Screen Shot 2019-05-16 at 13 00 14

    Third click Screen Shot 2019-05-16 at 14 25 57

    I am passing the following props to ImageGallery:

    <ImageGallery
      items={imageArray2}
      lazyLoad
      renderLeftNav={this.renderLeftNav}
      renderRightNav={this.renderRightNav}
      showIndex={imageArray2.length > 1}
      onSlide={this.fadeIn}
    />
    

    The array is structured as follows:

    original: slide.entity.fieldImage.entity.fieldMediaImage.large.url,
            originalAlt: slide.entity.fieldImage.entity.fieldMediaImage.alt,
            originalTitle: slide.entity.fieldCaption,
            description: slide.entity.fieldCaption,
            thumbnail: slide.entity.fieldImage.entity.fieldMediaImage.thumb.url,
            thumbnailAlt: slide.entity.fieldImage.entity.fieldMediaImage.alt,
            thumbnailTitle: slide.entity.fieldCaption,
            imageSet: [
              {
                srcSet: slide.entity.fieldImage.entity.fieldMediaImage.small.url,
                media: '(max-width: 576px)',
              },
              {
                srcSet: slide.entity.fieldImage.entity.fieldMediaImage.medium.url,
                media: '(min-width: 768px)',
              },
              {
                srcSet: slide.entity.fieldImage.entity.fieldMediaImage.large.url,
                media: '(min-width: 1280px)',
              },
            ],
    

    I hope this is enough to go on for the moment. If you would like anything else or anymore info please let me know.

    bug need-investigation 
    opened by gcosgreave-us 16
  • Thumbnails should scroll vertically too.

    Thumbnails should scroll vertically too.

    Right now I see you have only translateX.

    I am using this plugin and I have requirement where I need to translateY.

    Would you be kind enough to implement this feature :)

    enhancement 
    opened by sylvesteraswin 15
  • Uncaught TypeError on unmounting

    Uncaught TypeError on unmounting

    Since v0.8.8, when an image gallery is unmounted, an Uncaught TypeError occurs:

    Uncaught TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'.
        at image-gallery.js:137
        at invokeFunc (index.js:160)
        at trailingEdge (index.js:207)
        at timerExpired (index.js:195)
    

    I believe it is introduced by adding the debounce in b273f9d0da94.

    bug need-investigation 
    opened by wouterh 15
  • Slide transition:

    Slide transition: "Ghost images"

    Hey guys,

    I have implented your great component with SVGs with transparent background and on some transitions it seems like "other" slides "ghosting around", I tried to capture in the following GIF:

    Gif

    You can play with the live example here https://myinnerteam.com/

    Can you see wheat I mean?

    Any ideas how to avoid/fix?

    Thanks

    bug 
    opened by pablopaul 14
  • onTouchStart results in unexpected behavior

    onTouchStart results in unexpected behavior

    With this line in place, merely scrolling past the image gallery with the scrolling finger touching the area of the gallery will result in the triggering of the custom onClick method, which, in turn, might do things like opening a larger image on a modal; a very unexpected behavior and frustrating user experience.

    The onClick should trigger just fine on tap events on touch devices, there is no need to specify a separate onTouchStart if the goal is simply to make sure that the custom onClick method works on these devices. Is there any other reason for having included this line, or is it safe to remove it?

    opened by gaborluk 14
  • Getting Errors on attempting to Install

    Getting Errors on attempting to Install

    This is just what I'm looking for. However, seeing I get an error on attempting to installing the package, I can't progress. I have only a few weeks at ReactJS so very limited knowledge/understanding.

    I tried --force but that didn't work either.

    Here is installation/error log

    ErrorInstalling

    merged chore 
    opened by ErnestAbbott 13
  • lazyLoad buffering

    lazyLoad buffering

    Is it possible to add a buffer image around the right and left images? Without the buffer, on swipe, you get a blank image as the next image ( shown by dragging slow) like so:

    swipe

    Can another image be tacked on to each side (right, left) so the blank image thing doesn't happen?

    opened by tadjohnston 13
  • Moved keydown event listener off the window

    Moved keydown event listener off the window

    Moved keydown event listener off the window and onto the image gallery container. Prevents slides from changing while focused outside of the slider and using the left and right arrow keys. Also tested to make sure esc still works when in fullscreen.

    enhancement 
    opened by AustinLeeGordon 12
  • On build, width and height are 0

    On build, width and height are 0

    Describe the bug I'm on nextjs, when I'm in production, width and height is 0, whether or not I specify the value in items. In my case I don't have the value of width and height, I would like it not to be filled in at all. In dev, I have no problem.

    Image Gallery Version ^1.2.7

    To Reproduce I built my item array like this:``` temp.push({ original: photo.contentUrl, thumbnail: photo.contentUrl, originalClass: Styles.itemCarousel, thumbnailClass: Styles.itemPagination, width: "100%", height: "100%", originalAlt: "Images" })

    
    

    <ImageGallery items={images} useBrowserFullscreen={false} renderLeftNav={(onClick, disabled) => { return ( <button className={Styles.arrow + " " +Styles.arrowLeft + " "+ (disabled && Styles.isDisabled)} onClick={onClick} > chevron_left )}} renderRightNav={(onClick, disabled) => ( <button className={Styles.arrow + " " +Styles.arrowRight + " "+ (disabled && Styles.isDisabled)} onClick={onClick} > chevron_right
    )} />

    **Expected behavior**
    `<img class="image-gallery-image" src="....." alt="Images" srcset="" sizes="" title="">`
    instead of 
    `<img class="image-gallery-image" src="....." alt="Images" width="0" height="0" srcset="" sizes="" title="">`
    
    
    **Desktop (please complete the following information):**
     - OS: IOS
     - Browser : Chrome
     - Version [e.g. 22]
    
    **Additional context**
    Add any other context about the problem here.
    
    opened by MelanieCroce 0
  • Bump follow-redirects from 1.14.1 to 1.14.7

    Bump follow-redirects from 1.14.1 to 1.14.7

    Bumps follow-redirects from 1.14.1 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • How do I style the nav buttons?

    How do I style the nav buttons?

    Screen Shot 2022-01-11 at 12 59 01 AM

    Currently the nav button are huge on my component. I was wondering how i can change the size of it. Thanks in advance.

    opened by davidc360 0
  • Allow custom aria-role for slides, instead of forcing all slides to have role

    Allow custom aria-role for slides, instead of forcing all slides to have role "button"

    Is your feature request related to a problem? Please describe. If you are using renderItem() to render your items, and the JSX returned by renderItem() has focusable elements (buttons, links , etc.), you'll get an accessibility warning when running an accessibility audit with axe devTools that "Interactive Controls must not be nested".

    Screen Shot 2022-01-06 at 7 56 34 AM

    Describe the solution you'd like Currently slides are hard coded to have the role "button" (see source code here). I'd like to be able to pass a slideRole prop into the ImageGallery component that could override the hardcoded value.

    Describe alternatives you've considered We could get more opinionated if we'd like - for example we could traverse the DOM on the return of renderItem to see if there's focusable elements within it and then set it to "group" if there are focusable items, and "button" if not . . . but that feels like overkill.

    Additional context I've created a branch locally and am ready to push up a fix for this, but I'm getting a 403 when I try to push. Do you need to give me access to this repo first?

    Also, THANKS for making this library! We're using this on https://www.driveway.com/ in a few different places :)

    opened by dbridenbeck 0
  • Add Support for React Remix Run

    Add Support for React Remix Run

    Your library worked great for my React and Next.s projects, but the styling is messed up when using it in a Remix project.

    Remix Run is a new React framework, but I couldn't point out any major reason why the styling is broken.

    Basically, what happens is that when I add the <ImageGallery> tag (with props) to a Remix page, the subsequent images appear on page OUTSIDE OF the main image gallery container. The thumbnails still show at the bottom of the gallery container.

    The expected behavior is that only one image shows as at a time, and then the next image should show when I either click on a thumbnail or click an arrow button.

    Could I get the actual CSS file so that I can add it to my Remix project locally? If not, could you provide support for this new framework (I think we only need the styling change; the functionality should work because Remix runs on React Router DOM).

    Thanks!

    question 
    opened by ronb1982 1
  • Swiping not working on last slide in RTL

    Swiping not working on last slide in RTL

    Issue happens when using mobile in RTL. When you get to the last slide (and sliding is not infinite), you can't swipe back. You can only use the buttons.

    1.2.7

    opened by miriamliberman 0
  • How to load local images

    How to load local images

    I cant't understand how i can load local images to this gallery. In this project is possible to load only linked images? Example: const images = [ { original: 'https://picsum.photos/id/1018/1000/600/', thumbnail: 'https://picsum.photos/id/1018/250/150/',

          },
    

    ] If I try to write the path instead of 'https' local path via src={example image}, it will result in an error

    question 
    opened by bob-nem 4
  • Image gallery component not respecting height of parent

    Image gallery component not respecting height of parent

    Describe the bug ImageGallery component is not respecting height of parent div.

    Image Gallery Version Latest version

    To Reproduce

    1. Create div max-height 500px width 100% of container.
    2. Image is out of parent bounds

    Expected behavior I would expect this component to stay inside parent. Adding custom CSS to this library is a headache.

    opened by povilasDadelo 1
  • slideInterval prop doesn't work when used with slideDuration

    slideInterval prop doesn't work when used with slideDuration

    Describe the bug slideInterval prop doesn't work when used with slideDuration (only tested on web because not interested in mobile vers)

    Image Gallery Version ^1.2.7

    To Reproduce

          <ImageGallery
            items={images}
            autoPlay={true}
            slideInterval={5000} slideDuration={3000}
          />
    

    If you want an image that stays for 5 seconds and that takes 3 seconds to slide with autoplay. Then doing this will only work for the first image, and all the remainings will only stay for 3 seconds (the slideDuration prop's value). Refreshing will do the same behaviour (first img stay 5 secs, slide is always 3 secs, and all remaining images (even the first one) will only stay 3 secs).

    Expected behavior A slideshow with images that stays for 5 seconds and that takes 3 seconds to slide with autoplay.

    Desktop (please complete the following information): Ubuntu 20.04.3 LTS Chrome Version 93.0.4577.63 (Official Build) (64-bit)

    Additional context I tried every kind of variations, inverting slideInterval and slideDuration values, but nothing would work. This was the closest solution I found. Though, when putting slideInterval to 3000 and slideDuration to 5000, everything takes 5 secs (both slideInterval and slideDuration), which is also a problem.

    The problem is probably linked with a prop that is first set well, and then reseted to the default value, or somewhere slideDuration is used instead of slideInterval ...

    question 
    opened by chetrit 1
  • Slides to show in thumbnail slider and show current slide at top

    Slides to show in thumbnail slider and show current slide at top

    Is your feature request related to a problem? Please describe. I am trying to implement the slider on the PDP, but the thumbnail slider shows half images when slided and also there is no props for limiting the number of slides to be shown in the thumbnail.

    Describe the solution you'd like I would like that if when I slide, the whole thumbnail should slide to the top and only a limited(decided by us) thumbnails are visible to us.

    Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

    Additional context Add any other context or screenshots about the feature request here.

    opened by abhverma10 0
Releases(v1.2.7)
  • v1.2.7(Aug 11, 2021)

  • v1.2.6(Jul 29, 2021)

    Deprecated: imageSet has been removed when passing in item. Use custom renderItem if you need to render imageSet

    Improvements: optimized renderItem so that it is not called again when changing slides #423 improved swipe gestures when swiping up/down (prevent moving the slide) and swiping left/right (prevent background scrolling) #616

    Source code(tar.gz)
    Source code(zip)
  • v1.2.5(Jul 20, 2021)

  • v1.2.2(Jul 11, 2021)

  • v1.1.0(May 31, 2021)

    Fixes the following issues

    #587 (non-passive event listener fix for react-swipeable) #595 (Thumbnails should have their own width and height) #599 (Remove preventDefaultTouchmoveEvent in favor of using css touchAction: pan-x)

    Source code(tar.gz)
    Source code(zip)
  • v1.0.10(May 28, 2021)

    Resolves the following issues

    • Adds play pause refresh on slideInterval or slideDuration change #577
    • Some css enhancement and fixes #544
    • Fixes calling handleResize when component unmounts #498
    • Mark original as not required for custom render methods #499
    • Remove focus on current thumbnail and bullet #507
    Source code(tar.gz)
    Source code(zip)
  • v1.0.9(Feb 23, 2021)

  • v1.0.8(Jul 21, 2020)

  • v1.0.7(Mar 26, 2020)

    While playing reset slider timer when sliding left or right #483 Use srcSet instead of media for imageSet prop #490 Fix onscreenchange when not using browser fullscreen API #489 Fix onscreenchange for multiple galleries #493

    Source code(tar.gz)
    Source code(zip)
  • v1.0.6(Jan 31, 2020)

  • v1.0.5(Jan 13, 2020)

  • v1.0.4(Jan 11, 2020)

  • v1.0.0(Dec 22, 2019)

    Breaking changes

    PROPS renamed: onErrorImage => onErrorImageURL disableArrowKeys => disableKeyDown

    CSS class changes image-gallery-image now on the img element and not its container

    Improvements and bug fixes

    • More a11y friendly
    • eslint fixes
    • onErrorImage should only be called once per load
    • use svg icons instead of ionicons
    • fix fullscreen and larger screen aspect ratio
    Source code(tar.gz)
    Source code(zip)
  • v0.9.1(Aug 22, 2019)

  • v0.8.18(Jul 5, 2019)

    • Removed unsafe lifecycles in preparation for react 17 #270
    • fix startIndex not updating on change #422
    • Update eslint config to extend airbnb (lots of lint errors now, lint updates coming soon...)
    Source code(tar.gz)
    Source code(zip)
  • v0.8.17(May 27, 2019)

  • v0.8.16(Apr 5, 2019)

  • v0.8.15(Mar 31, 2019)

    • Add style to package.json #394
    • Add the ability to slide by hovering thumbnails #387
    • fullscreen button - image doesn't fit over screen #383
    Source code(tar.gz)
    Source code(zip)
  • v0.8.14(Feb 19, 2019)

  • v0.8.13(Feb 19, 2019)

  • v0.8.12(Oct 9, 2018)

  • v0.8.10(Aug 1, 2018)

  • v0.8.9(Jun 14, 2018)

  • v0.8.8(May 28, 2018)

    Backwards Incompatible changes

    • slideOnThumbnailHover prop removed

    Other changes

    • Handle resizing using ReactResizeDetector #266
    • Thumbnails not aligned correctly when items.length changes (#267)
    • Use disabled property of Swipeable to disable swipe (#283)
    • Other bug fixes and improvements
    Source code(tar.gz)
    Source code(zip)
  • v0.8.7(Jan 14, 2018)

    • added additionalClass prop on root node of the component
    • added option to change translate3d to translate css using prop useTranslate3D (default true)
    • added bulletClass and bulletOnClick attribute on images
    • added support for <source> and <picture> for images
    • other bug fixes and enhancements
    Source code(tar.gz)
    Source code(zip)
  • v0.8.6(Nov 12, 2017)

  • v0.8.5(Nov 6, 2017)

  • v0.8.4(Nov 4, 2017)

    Fix issue #217

    New Props

    • swipeThreshold: Integer, default 30
      • A percentage of how far the offset of the current slide is swiped to trigger a slide event. e.g. If the current slide is swiped less than 30% to the left or right, it will not trigger a slide event.
    • stopPropagation: Boolean, default false
      • Automatically calls stopPropagation on all 'swipe' events.
    • preventDefaultTouchmoveEvent: Boolean, default false
      • An option to prevent the browser's touchmove event (stops the gallery from scrolling up or down when swiping)
    Source code(tar.gz)
    Source code(zip)
  • v0.8.3(Jun 24, 2017)

    • Support of additional touch events on the slides
      • onTouchEnd: Function, callback(event)
      • onTouchStart: Function, callback(event)
    • Adds onThumbnailClick prop callback
    • Fixed warning for setState when resizing the gallery after unmounting
    Source code(tar.gz)
    Source code(zip)
Justified image gallery component for React

React Grid Gallery Justified image gallery component for React inspired by Google Photos and based upon React Images. ?? Maintainers wanted ?? As reac

Ben Howell 628 Jan 20, 2022
React for Upload Image Gallery. Drag & Drop, Sortable, Customize.

React Upload Gallery A simple library that lets you create an image gallery, change the order of images, select the highlighted image, and customize i

Minan 57 Jan 20, 2022
React Native Image Gallery with Thumbnails

React Native Image Gallery with Thumbnails Features Image gallery with thumbnails Made with PanResponder, no external dependencies Written in Typescri

null 16 Jan 2, 2022
Minimalistic image gallery for react. Responsive with all important features and smooth animations.

imager Minimalistic image gallery for REACT. Responsive with all important features and smooth animations. DEMO Desktop Phone Slow internet connection

Gaidadei Vladimir 7 Dec 24, 2021
A React component to render any Ethereum address's NFTs as a gallery

React NFT Gallery ?? Playground (Storybook) React NFT Gallery is a React component to render any Ethereum address's NFTs as a gallery. The NFT assets

null 1 Nov 30, 2021
🌈 A React image component. Simple realization of image shadow.

?? react-image-shadow A React image component. Simple realization of image shadow.

null 21 Jan 16, 2022
A react component that renders image tag only if the image source is found without error.

Img-or-alt This react component that will render image tag only if the image source is found without error, otherwise it renders only the alt text in

Radi 1 Dec 14, 2021
React Photo Gallery

React Photo Gallery Responsive, accessible, composable, and customizable image gallery component Maintains the original aspect ratio of your photos Cr

Sandra Gonzales 1.7k Jan 13, 2022
lightGallery - A customizable, modular, responsive, lightbox gallery plugin

lightGallery - A customizable, modular, responsive, lightbox gallery plugin

Sachin N 4.9k Jan 15, 2022
Gallery images similar facebook

Gallery images similar facebook

Coding By Jerez 1 Nov 17, 2021
Recreate one image using the tiles from another image.

Mosaic Recreate one image using the tiles from another image. https://mosaic.constraint.systems About the algorithm The image proccessing works like t

Constraint Systems 5 Jan 2, 2022
🌄 A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS

React Images ⚠️ Warning! Don't use this in a new project. This package hasn't been properly maintained in a long time and there are much better option

Joss Mackison 2.3k Jan 13, 2022
simple image slider component for react

simple image slider component for react

kimcoder 84 Jan 9, 2022
A React component for magnifying an image within its original container

A React component for magnifying an image within its original container. Zoom behavior can be triggered on click or hover and the zoomed image can be moved by dragging on touch devices and either dragging or pan on hover on non-touch devices. The component supports responsive images, loading placeholders, optional fullscreen zoom on mobile, and more.

Lauren Ashpole 162 Jan 17, 2022
An interactive, multi-layer image component for React

react-layered-image react-layered-image is an interactive, multi-layer image component for React, inspired by the Apple TV layered images. Features Ru

Antoine Llorca 16 Dec 22, 2021
React component for image displaying in full screen

React Image Viewer [email protected] has been rewriten with React Hooks and all apis of it have been redesigned. If you are using [email protected], please

loading... 59 Jan 13, 2022
Cornerstone medical image viewport component for React

react-cornerstone-viewport Cornerstone medical image viewport component for React Documentation and Examples:

cornerstone.js 63 Jan 12, 2022
🔍 React image zoom component

react-magnifier React image zoom component Simple and customizable Supports touch screens Allows different files for large image and magnifying glass

Samuel Meuli 135 Jan 10, 2022
React component for desktop browsers for image zoom on mouse hover

react-image-zoom Overview React component for desktop browsers for image zoom on mouse hover. Demo Demo Install npm install react-image-zoom --save U

Andrii Malaman 115 Jan 16, 2022