All Projects → transitive-bullshit → React Background Slideshow

transitive-bullshit / React Background Slideshow

Sexy tiled background slideshow for React 🔥

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Background Slideshow

Croppr.js
A vanilla JavaScript image cropper that's lightweight, awesome, and has absolutely zero dependencies.
Stars: ✭ 294 (+200%)
Mutual labels:  image, component
React Native Blurhash
🖼️ A library to show colorful blurry placeholders while your content loads.
Stars: ✭ 430 (+338.78%)
Mutual labels:  image, component
Kiimagepager
The KIImagePager is inspired by foursquare's ImageSlideshow, the user may scroll through images loaded from the Web
Stars: ✭ 324 (+230.61%)
Mutual labels:  slideshow, image
Ffmpeg Video Slideshow Scripts
Shell scripts to create video slideshows using images and videos
Stars: ✭ 248 (+153.06%)
Mutual labels:  slideshow, image
Vue Picture Input
Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more
Stars: ✭ 862 (+779.59%)
Mutual labels:  image, component
Uieffect
UIEffect is an effect component for uGUI element in Unity. Let's decorate your UI with effects!
Stars: ✭ 3,449 (+3419.39%)
Mutual labels:  background, component
Ngx Gallery
Angular Gallery, Carousel and Lightbox
Stars: ✭ 417 (+325.51%)
Mutual labels:  slideshow, image
React Native Scalable Image
React Native Image component which scales width or height automatically to keep the original aspect ratio
Stars: ✭ 241 (+145.92%)
Mutual labels:  image, component
Repng
React component to PNG converter
Stars: ✭ 856 (+773.47%)
Mutual labels:  image, component
Eager Image Loader
The eager-loading for image files on the web page that loads the files according to your plan. This differs from the lazy-loading, for example, this can be used to avoid that the user waits for the loading.
Stars: ✭ 22 (-77.55%)
Mutual labels:  background, image
Vue Infinite Slide Bar
∞ Infinite slide bar component (no dependency and light weight 1.48 KB)
Stars: ✭ 190 (+93.88%)
Mutual labels:  slideshow, component
Slendr
A responsive & lightweight (2KB gzipped) slider for modern browsers. [UNMAINTAINED]
Stars: ✭ 39 (-60.2%)
Mutual labels:  slideshow, component
Atgmediabrowser
Image slide-show viewer with multiple predefined transition styles, with ability to create new transitions with ease.
Stars: ✭ 186 (+89.8%)
Mutual labels:  slideshow, image
Auk
An image slideshow for iOS written in Swift.
Stars: ✭ 274 (+179.59%)
Mutual labels:  slideshow, image
Imageslideshow
Swift image slideshow with circular scrolling, timer and full screen viewer
Stars: ✭ 1,612 (+1544.9%)
Mutual labels:  slideshow, image
Vue Lazy Image Loading
Vue lazy image and background loading plugin.
Stars: ✭ 335 (+241.84%)
Mutual labels:  background, image
React Magnifier
🔍 React image zoom component
Stars: ✭ 116 (+18.37%)
Mutual labels:  image, component
Silentbox
A lightbox inspired Vue.js component.
Stars: ✭ 196 (+100%)
Mutual labels:  image, component
React Native Fit Image
Responsive image component to fit perfectly itself.
Stars: ✭ 539 (+450%)
Mutual labels:  image, component
React Image Lightbox
React lightbox component
Stars: ✭ 956 (+875.51%)
Mutual labels:  image, component

react-background-slideshow

Sexy tiled background image slideshow for React - Try it out! 🔥

NPM JavaScript Style Guide

(Animations sped up for demo)

Intro

This component is meant to be used as a full viewport background slideshow that can easily add a slick, polished feel to pages that don't have much content.

I've personally used it for several projects as the background for login / signup / dialog screens where the only content is a single foreground modal generally prompting the user for some info.

Install

npm install --save react-background-slideshow

Usage

import React, { Component } from 'react'

import BackgroundSlideshow from 'react-background-slideshow'

import image1 from './assets/001.jpg'
import image2 from './assets/002.jpg'
import image3 from './assets/003.jpg'

export default class App extends Component {
  render () {
    return (
      <div>
        <BackgroundSlideshow images={[ image1, image2, image3 ]} />
      </div>
    )
  }
}

The BackgroundSlideshow component will have position: absolute and sized to stretch with its container, which will most often be the root window.

API

ReactBackgroundSlideshow

  • props.images - array, required array of images to transition between.
  • props.disableClick - boolean, optional disables click to transition (default false)
  • props.disableInterval - boolean, optional disables automated automation at interval specified by automationDelay (default false)
  • props.animationDelay - number, optional specifies the interval in ms for transitions while idle (default 10000)
  • props.alt - string, optional specifies the alt attribute to use for the underlying <img> elements (default background slideshow)
  • props.startAt - number, optional specifies the index to start the slideshow at. By default will randomly select one.
  • props.onChange - function, optional specifies the callback to call when the transition is complete. This is sent the argument { index: number, image: string }. index is the props.images index the slideshow is showing. image is the image url from images being shown after the change.

Note I highly recommend using background images with a resolution of 1280x850. The effects have not been tested thoroughly with other asset sizes and there is a possibility that other aspect ratios break some of the internal assumptions, as the effects are using <img> elements and css transforms instead of background-image / backgrouns-size: contain or cover for performance reasons. If you have any questions or run into issues with this constraint, I recommend reading through the original codrops article thoroughly.

Note there are 3 distinct transition effects, and the component will randomly cycle through them.

Note the component will randomly choose an image to start from.

Demo

This repo comes with an example create-react-app under example/ that can be run locally to experiment with the component. This demo is also hosted here.

cd example
npm install
npm start

This will start the create-react-app dev server locally on port 3000 and open the demo app in your default browser.

Mobile Demo

This component is fully responsive and should work on all screen sizes. The above gif was captured from an emulated iPhone 6.

Credit

This component is a React port of a jQuery effect published in 2014 in an awesome article by codrops. The original article gives a great breakdown of how the transitions work, with all the underlying logic still very relevant in a post-jQuery world. This component replaces all of the mutable DOM interactions from the original version with more modern React conventions.

License

MIT © Travis Fischer

Support my OSS work by following me on twitter twitter

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].