Svelte image gallery ported from react-image-gallery
npm install @react2svelte/image-gallery
This is an image gallery for Svelte based on react-image-gallery v1.2.11. Many thanks to all the contributors of that package for their hard work!
react2svelte.github.io/image-gallery/.
React image gallery is a React component for building image galleries and carousels
- [x] Mobile swipe gestures (using @react2svelte/swipable)
- [x] Thumbnail navigation
- [x] Fullscreen support
- [x] RTL support
- [x] Responsive design
- [x] Tons of customization options (see props below)
- [x] play, pause, slide, beforeslide, screenchange, imageload, imageerror, click events
Not yet ported
- [ ] Custom rendered slides and controls
- [ ] Some events (see below)
Install the library
```
npm i @react2svelte/image-gallery
Use it in your component/page
`html
`
You can also have a look at the demo page of the package, it allows setting library settings interactively. To run it locally:
``
git clone https://github.com/react2svelte/image-gallery.git
cd image-gallery
npm install
npm run dev
And open http://localhost:5173/
- items: (required) Array of objects, see example above,original
- Available Properties
- - image src urlthumbnail
- - image thumbnail src urlfullscreen
- - image for fullscreen (defaults to original)originalHeight
- - image height (html5 attribute)originalWidth
- - image width (html5 attribute)loading
- - image loading. Either "lazy" or "eager" (html5 attribute)thumbnailHeight
- - image height (html5 attribute)thumbnailWidth
- - image width (html5 attribute)thumbnailLoading
- - image loading. Either "lazy" or "eager" (html5 attribute)originalClass
- - custom image classthumbnailClass
- - custom thumbnail classrenderItem
- - Function for custom rendering a specific slide (see renderItem below)renderThumbInner
- - Function for custom thumbnail renderer (see renderThumbInner below)originalAlt
- - image altthumbnailAlt
- - thumbnail image altoriginalTitle
- - image titlethumbnailTitle
- - thumbnail image titlethumbnailLabel
- - label for thumbnaildescription
- - description for imagesrcSet
- - image srcset (html5 attribute)sizes
- - image sizes (html5 attribute)bulletClass
- - extra class for the bullet of the iteminfinite
- : Boolean, default truelazyLoad
- infinite sliding
- : Boolean, default falseshowNav
- : Boolean, default trueshowThumbnails
- : Boolean, default truethumbnailPosition
- : String, default bottomtop, right, bottom, left
- available positions: showFullscreenButton
- : Boolean, default trueuseBrowserFullscreen
- : Boolean, default trueuseTranslate3D
- if false, fullscreen will be done via css within the browser
- : Boolean, default truetranslate
- if false, will use instead of translate3d css property to transition slidesshowPlayButton
- : Boolean, default trueisRTL
- : Boolean, default falseshowBullets
- if true, gallery's direction will be from right-to-left (to support right-to-left languages)
- : Boolean, default falseshowIndex
- : Boolean, default falseautoPlay
- : Boolean, default falsedisableThumbnailScroll
- : Boolean, default falsedisableKeyDown
- disables the thumbnail container from adjusting
- : Boolean, default falsedisableSwipe
- disables keydown listener for keyboard shortcuts (left arrow, right arrow, esc key)
- : Boolean, default falsedisableThumbnailSwipe
- : Boolean, default falseonErrorImageURL
- : String, default undefinedindexSeparator
- an image src pointing to your default image if an image fails to load
- handles both slide image, and thumbnail image
- : String, default ' / ', ignored if showIndex is falseslideDuration
- : Number, default 450swipingTransitionDuration
- transition duration during image slide in milliseconds
- : Number, default 0slideInterval
- transition duration while swiping in milliseconds
- : Number, default 3000slideOnThumbnailOver
- : Boolean, default falseflickThreshold
- : Number (float), default 0.4swipeThreshold
- Determines the max velocity of a swipe before it's considered a flick (lower = more sensitive)
- : Number, default 30stopPropagation
- 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.
- : Boolean, default falsestartIndex
- Automatically calls stopPropagation on all 'swipe' events.
- : Number, default 0additionalClass
- : String,useWindowKeyDown
- Additional class that will be added to the root node of the component.
- : Boolean, default truetrue
- If , listens to keydown events on window (window.addEventListener)false
- If , listens to keydown events on image gallery element (imageGalleryElement.addEventListener)
The following functions can be accessed:
- play(): plays the slidespause()
- : pauses the slidesfullScreen()
- : activates full screenexitFullScreen()
- : deactivates full screenslideToIndex(index)
- : slides to a specific indexgetCurrentIndex()
- : returns the current index
Already supported
- [x] slide: Function, details: { currentIndex: number }beforeslide
- [x] : Function, details: { nextIndex: number }screenchange
- [x] : Function, details: { fullscreen: boolean }pause
- When fullscreen is toggled a boolean is passed to the callback
- [x] : Function, details: { currentIndex: number }play
- [x] : Function, details: { currentIndex: number }imageload
- [x] : Function, details: { index: number, event }imageerror
- [x] : Function, details: { index: number, event }click
- [x] : Function, details: event
Not yet supported
- [ ] onThumbnailError: Function, callback(event)onThumbnailClick
- overrides onErrorImage
- [ ] : Function, callback(event, index)onTouchMove
- [ ] : Function, callback(event) on gallery slideonTouchEnd
- [ ] : Function, callback(event) on gallery slideonTouchStart
- [ ] : Function, callback(event) on gallery slideonMouseOver
- [ ] : Function, callback(event) on gallery slideonMouseLeave
- [ ] : Function, callback(event) on gallery slide
react-image-gallery` supports rendering custom controls, this feature has not been ported yet.
MIT