npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@react2svelte/image-gallery

v1.0.1

Published

Svelte image gallery ported from react-image-gallery

Downloads

69

Readme

@react2svelte/image-gallery

npm version

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!

Live Demo (try it on mobile for swipe support)

react2svelte.github.io/image-gallery/.

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

Features

  • [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)

Getting started

Install the library

npm i @react2svelte/image-gallery

Use it in your component/page

<script lang="ts">
  import ImageGallery from '@react2svelte/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/'
    }
  ];
</script>

<ImageGallery items="{images}" />

Demo

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/

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)
      • 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 class
      • thumbnailClass - custom thumbnail class
      • renderItem - Function for custom rendering a specific slide (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
      • srcSet - image srcset (html5 attribute)
      • sizes - image sizes (html5 attribute)
      • bulletClass - extra class for the bullet of the item
  • 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
  • disableThumbnailSwipe: 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.
  • startIndex: Number, default 0
  • additionalClass: String,
    • Additional class that will be added to the root node of the component.
  • useWindowKeyDown: Boolean, default true
    • If true, listens to keydown events on window (window.addEventListener)
    • If false, listens to keydown events on image gallery element (imageGalleryElement.addEventListener)

Functions

The following functions can be accessed:

  • 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

Events

Already supported

  • [x] slide: Function, details: { currentIndex: number }
  • [x] beforeslide: Function, details: { nextIndex: number }
  • [x] screenchange: Function, details: { fullscreen: boolean }
    • When fullscreen is toggled a boolean is passed to the callback
  • [x] pause: Function, details: { currentIndex: number }
  • [x] play: Function, details: { currentIndex: number }
  • [x] imageload: Function, details: { index: number, event }
  • [x] imageerror: Function, details: { index: number, event }
  • [x] click: Function, details: event

Not yet supported

  • [ ] onThumbnailError: Function, callback(event)
    • overrides onErrorImage
  • [ ] onThumbnailClick: Function, callback(event, index)
  • [ ] 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

Custom Controls

react-image-gallery supports rendering custom controls, this feature has not been ported yet.

License

MIT