Pip Install Dash-Image-Gallery 🏞️

[PipInstallPython]

I noticed their is only a few image sliders within the Plotly community so I wanted to add this component to the available list of options developers could use.

dash-image-gallery

Live Demo Example (try it on mobile for swipe support)

linxtion.com/demo/react-image-gallery

Features

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

Installation

pip install dash-image-gallery

Props I setup:

• id: PropTypes.string,
  • items: PropTypes.arrayOf(PropTypes.shape({
    • original: PropTypes.string,
    • thumbnail: PropTypes.string,
    • fullscreen: PropTypes.string,
    • originalHeight: PropTypes.number,
    • originalWidth: PropTypes.number,
    • loading: PropTypes.string,
    • thumbnailHeight: PropTypes.number,
    • thumbnailWidth: PropTypes.number,
    • thumbnailLoading: PropTypes.string,
    • originalClass: PropTypes.string,
    • thumbnailClass: PropTypes.string,
    • renderItem: PropTypes.func,
    • renderThumbInner: PropTypes.func,
    • originalAlt: PropTypes.string,
    • thumbnailAlt: PropTypes.string,
    • originalTitle: PropTypes.string,
    • thumbnailTitle: PropTypes.string,
    • thumbnailLabel: PropTypes.string,
    • description: PropTypes.string,
    • srcSet: PropTypes.string,
    • sizes: PropTypes.string,
    • bulletClass: PropTypes.string
      })).isRequired,
  • infinite: PropTypes.bool,
  • lazyLoad: PropTypes.bool,
  • showNav: PropTypes.bool,
  • showThumbnails: PropTypes.bool,
  • thumbnailPosition: PropTypes.string,
  • showFullscreenButton: PropTypes.bool,
  • useBrowserFullscreen: PropTypes.bool,
  • useTranslate3D: PropTypes.bool,
  • showPlayButton: PropTypes.bool,
  • isRTL: PropTypes.bool,
  • showBullets: PropTypes.bool,
  • showIndex: PropTypes.bool,
  • autoPlay: PropTypes.bool,
  • disableThumbnailScroll: PropTypes.bool,
  • disableKeyDown: PropTypes.bool,
  • disableSwipe: PropTypes.bool,
  • disableThumbnailSwipe: PropTypes.bool,
  • onErrorImageURL: PropTypes.string,
  • indexSeparator: PropTypes.string,
  • slideDuration: PropTypes.number,
  • swipingTransitionDuration: PropTypes.number,
  • slideInterval: PropTypes.number,
  • slideOnThumbnailOver: PropTypes.bool,
  • flickThreshold: PropTypes.number,
  • swipeThreshold: PropTypes.number,
  • stopPropagation: PropTypes.bool,
  • startIndex: PropTypes.number,
  • onImageError: PropTypes.func,
  • onThumbnailError: PropTypes.func,
  • onThumbnailClick: PropTypes.func,
  • onBulletClick: PropTypes.func,
  • onImageLoad: PropTypes.func,
  • onSlide: PropTypes.func,
  • onBeforeSlide: PropTypes.func,
  • onScreenChange: PropTypes.func,
  • onPause: PropTypes.func,
  • onPlay: PropTypes.func,
  • onClick: PropTypes.func,
  • onTouchMove: PropTypes.func,
  • onTouchEnd: PropTypes.func,
  • onTouchStart: PropTypes.func,
  • onMouseOver: PropTypes.func,
  • onMouseLeave: PropTypes.func,
  • additionalClass: PropTypes.string,
  • renderCustomControls: PropTypes.func,
  • renderItem: PropTypes.func,
  • renderThumbInner: PropTypes.func,
  • renderLeftNav: PropTypes.func,
  • renderRightNav: PropTypes.func,
  • renderPlayPauseButton: PropTypes.func,
  • renderFullscreenButton: PropTypes.func,
  • useWindowKeyDown: PropTypes.bool,

You can find the projects code at (give a to show some appreciation):

GitHub - pip-install-python/dash_image_gallery: Image gallery for dash