Skip to content
A slider for animated gifs that stretches full screen.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
.gitignore
LICENSE
README.md
package.json
server.js

README.md

Full Screen Gif Slider

A slider for animated gifs that pulls gif files from a directory and displays them randomly, stretched out to fill the viewport. Features keyboard navigation and swipe functionality for mobile. Requires jQuery.

View Demo

How to use

$ git clone https://github.com/davidrayoussef/full-screen-gif-slider.git

Add a folder of gifs within the public folder (make sure the folder is called "gifs")

$ cd full-screen-gif-slider
$ npm install
$ npm start

Point your browser to http://localhost:3000/

  • For best results...
    • only use horizontal, landscape images, since the images stretch to fit the screen. Vertical images will get distorted.
    • try to keep the filesizes under 1 meg, so that they have time to load and animate

Todo

Refactor to vanilla JavaScript instead of jQuery.

You can’t perform that action at this time.