https://github.com/nicinabox/superslides

A fullscreen, hardware accelerated slider for jQuery.
https://github.com/nicinabox/superslides

Last synced: about 2 months ago
JSON representation

A fullscreen, hardware accelerated slider for jQuery.

• Host: GitHub
• URL: https://github.com/nicinabox/superslides
• Owner: nicinabox
• License: mit
• Created: 2012-03-19T02:43:28.000Z (over 12 years ago)
• Default Branch: 0.6-stable
• Last Pushed: 2019-01-19T17:30:27.000Z (over 5 years ago)
• Last Synced: 2024-07-18T19:58:23.191Z (2 months ago)
• Language: JavaScript
• Homepage: http://archive.nicinabox.com/superslides
• Size: 5.66 MB
• Stars: 1,507
• Watchers: 89
• Forks: 442
• Open Issues: 173
• Metadata Files:
  • Readme: README.md
  • Changelog: changelog.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE-MIT

Awesome Lists containing this project

README

        
### /!\ This project is currently unmaintained

If you're interested in maintaining this project and triaging bugs [chime in on this issue](https://github.com/nicinabox/superslides/issues/353).

# Superslides

Superslides is a full screen, hardware accelerated slider for jQuery. I wasn't happy with the state of full screen sliders, so naturally I built my own.

## Usage

[Check out the demo](http://nicinabox.github.com/superslides/) for an interactive example or the examples folder for individual cases. Use like your standard jQuery plugin:

```javascript

$('#slides').superslides()

```

## Options

  

    Option

    Default

    Description

  

  

    play

    0

    [number] Milliseconds before progressing to next slide automatically. Use a falsey value to disable.

  

  

    animation

    'slide'

    [string] slide or fade. This matches animations defined by fx engine.

  

  

    animation_speed

    'normal'

    [string] Animation speed.

  

  

    animation_easing

    'linear'

    [string] Animation easing.

  

  

    inherit_width_from

    window

    [object] or [string] Accepts window or element selector. Use to constrain slider to an element's width.

  

  

    inherit_height_from

    window

    [object] or [string] Accepts window or element selector. Use to constrain slider to an element's height.

  

  

    pagination

    true

    [boolean] Generate pagination. Add an id to your slide to use custom pagination on that slide.

  

  

    hashchange

    false

    [boolean] Enable hashchange support in url.

  

  

    elements

    (see Elements below)

    [object] A hash of element classes used in generated html.

  

### Elements

The following are element classes accessible under the `elements` object.

  

    preserve

    '.preserve'

    [string] Add this class to images in your content that you don't want to be resized like the background images.

  

  

    nav

    '.slides-navigation'

    [string] Class surrounding next/previous buttons.

  

  

    container

    '.slides-container'

    [string] Container class that must be present with original markup.

  

  

    pagination

    '.slides-pagination'

    [string] Pagination class added to pagination container.

  

## Events

Superslides triggers a few events that you can bind to.

    started.slides

    init.slides

    animating.slides // Before slide animation begins

    animated.slides  // After slide animation ends

    updated.slides

## API

``` javascript

$('#slides').superslides('start')

$('#slides').superslides('stop')

$('#slides').superslides('animate' [, index|'next'|'prev'])

$('#slides').superslides('size')

$('#slides').superslides('destroy')

$('#slides').superslides('current') // get current slide index

$('#slides').superslides('next')    // get next slide index

$('#slides').superslides('prev')    // get previous slide index

```

If adding slides after initialization (a la ajax), be sure to call `update`.

## Styling

All styling required for functionality is handled in the JavaScript. Additional and optional styling is provided in `dist/stylesheets/superslides.css`

## Markup

Markup is pretty straightforward. At minimum it looks something like this:

``` html



  


    

    

  



```


You could even use a UL as the `slides-container`

``` html



  


    


      

      


        Slide one

      

    

    


      

      


        Slide two

      

    

    


      

      


        Slide three

      

    

  

  

    Next

    Previous

  



```


## Custom Animations

I realize that you might want to do something unique in your application. That's why I've added the ability to extend the existing animations with your own. See `examples/custom-fx.html`.

```javascript

$.fn.superslides.fx = $.extend({

  flip: function(orientation, complete) {

    console.log(orientation);

    complete();

  }

}, $.fn.superslides.fx);

```

## Hardware Acceleration

Superslides is compatible with the [jQuery Animate Enhanced](http://playground.benbarnett.net/jquery-animate-enhanced/) plugin. Simply include it before this plugin and it will automatically smooth out transitions using CSS instead of JavaScript.

## Contributing

Check contributing.md.

## Changelog

[Changelog](https://github.com/nicinabox/superslides/blob/0.5-stable/changelog.md)