https://github.com/terwanerik/fadeshow

A jQuery plugin that generates a simple fading CSS3 slideshow, that maintains the aspect-fill.
https://github.com/terwanerik/fadeshow

Last synced: 5 days ago
JSON representation

A jQuery plugin that generates a simple fading CSS3 slideshow, that maintains the aspect-fill.

• Host: GitHub
• URL: https://github.com/terwanerik/fadeshow
• Owner: terwanerik
• Created: 2015-02-03T23:16:20.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2019-09-04T13:11:34.000Z (about 5 years ago)
• Last Synced: 2024-10-31T22:50:23.682Z (12 days ago)
• Language: JavaScript
• Homepage: http://terwanerik.github.io/FadeShow/
• Size: 104 KB
• Stars: 29
• Watchers: 4
• Forks: 10
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# FadeShow - A simple CSS3 slideshow

> ⚠️ **Please note:** this project is over 2 years old, and has not been tested with newer versions of jQuery.

It aspect-fills the images, so its perfect for backgrounds. You can set an option to preserve the aspect-fill while resizing.

Enjoy.

## Demo

A live demo is available on [Github Pages](http://terwanerik.github.io/FadeShow).

## Usage

The plugin is really simple, add the jquery.fadeshow-[version].min.js to your project folder and include it.

```html

```

Now add the CSS file and jquery.fadeshow-[version].min.css to your project and include it.

```html

```

Place a container for the slideshow anywhere on your page, a div is preferred (it needs a width and height to show).

```html



```


Now call the .fadeShow() function on that element, you need to pass an array of image-urls. Do this after the page has finished loading.

```javascript

$(function(){

  $(".slideshow").fadeShow({

    images: ['/img/one.jpg',

	         '/img/two.jpg',

	         '/img/three.jpg']

  });

});

```

## Options

There are a number of options you can pass to the fadeShow, if you need a preview on how to do that, check the [live demo](http://terwanerik.github.io/FadeShow).

| Option Name | Type | Default | Description |

| ----------- | ---- | ------- | ----------- |

| images | Array of strings | null | All the images you want to display.  - REQUIRED |

| speed | Integer | 8000 | The number of milliseconds to wait for the next slide to appear. |

| startAtSlide | Integer | 0 | The index of the image to start with. |

| correctRatio | Boolean | false | If true, the aspect-fill is kept intact while resizing the window. If false, the aspect-fill only works every time a new image appears. |

| shuffle | Boolean | false | If true, the input will be shuffled, generating a random order every time you refresh. |

## Underscore.js

If you have implemented Underscore.js on your page, it will automaticly use the debounce function while resizing. This makes it a bit snappier on older devices.

## Known issues

You can only change the fade speed / easing in the CSS file, somehow if you change it after the DOM has loaded, the CSS3 animation doesn't work.