isabella232 / slides-3

Slides is a crazy simple slideshow plugin for jQuery. With features like looping, auto play, fade or slide transition effects, crossfading, image preloading, and auto generated pagination. With Slides you’ll never see multiple slides fly by. Slides elegantly just slides from one slide to the next. Awesome.

SlidesJS version 2.0 beta 1

SlidesJS version 2.0 beta 1 is not meant for production deployment.

For the current production ready version of SlidesJS visit http://slidesjs.com/.

Created by Nathan Searles, http://nathansearles.com

Support forum http://groups.google.com/group/slidesjs

© 2011 by Nathan Searles

SlidesJS 2 Demos

• Standard
• Responsive (kinda buggy, working on that)
• Browser Window

Soon to be added demos

• Carousel Style
  • 3 or 4 items per slide, could be album covers or similar
• Thumbnails
  • Pagination with thumbnails
• Captions
  • Image slideshow with captions
• Side Navigation
  • With vertical slideshow
• Play/pause
  • Image slideshow with play/pause button, pagination, next/prev buttons

SlidesJS 2 documentation

Basic Markup Structure

For just images you can simply use:

<div id="slides">
 <img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="570" height="270" alt="Slide 1">
 <img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="570" height="270" alt="Slide 2">
 <img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="570" height="270" alt="Slide 3">
 <img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="570" height="270" alt="Slide 4">
</div>

Or you can use <div>s for your slides

<div id="slides">
 <div>
  <img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="570" height="270" alt="Slide 1">
 </div>
 <div>
  <img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="570" height="270" alt="Slide 2">
 </div>
 <div>
  <img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="570" height="270" alt="Slide 3">
 </div>
 <div>
  <img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="570" height="270" alt="Slide 4">
 </div>
</div>

Simple as that. No extra <div>s, no navigation or pagination to define, it’s all created for you. SlidesJS creates two <div>s for the slideshow, “.slidesContainer” and “.slidesControl”, both are required and can not be changed.

Navigation classes are “.slidesPrevious” and “.slidesNext” and are created as anchor tags. These cannot be changed.

Pagination uses an unordered list markup structure. The <ul> has a class of “.slidesPagination”. This cannot be changed.

You may define your own navigation or pagination, but they must use the same class names, sorry it saves from including extraneous code.

Basic CSS

No CSS required. Shit yeah!

Initialize SlidesJS

<script>
 $(function(){
  $("#slides").slides();
 });
</script>

Tip: With SidesJS 2 you need to define the width and height if it’s different from the default (780px x 300px). This resolves many issues having to do with loading and makes SlidesJS 2 self contained, not requiring any CSS.

<script>
 $(function(){
  $("#slides").slides({
    width: 640,
    height: 480
  });
 });
</script>

Method Calls – The good stuff

Play

$("#slides").slides("play");

Pause

$("#slides").slides("pause");

Stop

$("#slides").slides("stop");

Next, using default effect

$("#slides").slides("next");

Next, define effect, “slide” or “fade”

$("#slides").slides("next","fade");

Previous, uses default effect

$("#slides").slides("previous");

Previous, define effect, “slide” or “fade”

$("#slides").slides("previous","fade");

Goto slide 2 using default effect

$("#slides").slides("slide",2);

Goto slide 2 define effect, “slide” or “fade”

$("#slides").slides("slide",4,"fade");

Update

$("#slides").slides("update");

Destroy

$("#slides").slides("destroy");

Status

$("#slides").slides("status");

Returns JSON object:

{

 current: 4,

 state: “playing”,

 total: 7

}

The follow could also be used

$("#slides").slides("status","current");

returns: number

$("#slides").slides("status","state");

returns: string, playing, paused, stopped, undefined

$("#slides").slides("status","total");

returns: number

Options

width: 780, // [Number] Define the slide width
responsive: false, // [Boolean] slideshow will scale to its container
height: 300, // [Number] Define the slide height
navigation: true, // [Boolean] Auto generate the naviagation, next/previous buttons
pagination: true, // [Boolean] Auto generate the pagination
effects: {
 navigation: "slide",  // [String] Can be either "slide" or "fade"
 pagination: "slide" // [String] Can be either "slide" or "fade"
 auto: "slide" // [String] Can be either "slide" or "fade"
},
direction: "left", // [String] Define the slide direction: "Up", "Right", "Down", "left"
fade: {
 interval: 1000, // [Number] Interval of fade in milliseconds
 crossfade: false, // [Boolean] TODO: add this feature. Crossfade the slides, great for images, bad for text
 easing: "" // [String] Dependency: jQuery Easing plug-in <http://gsgd.co.uk/sandbox/jquery/easing/>
},
slide: {
 interval: 1000, // [Number] Interval of fade in milliseconds
 browserWindow: false, // [Boolean] Slide in/out from browser window, bad ass
 easing: "" // [String] Dependency: jQuery Easing plug-in <http://gsgd.co.uk/sandbox/jquery/easing/>
},
preload: {
 active: true, // [Boolean] Preload the slides before showing them, this needs some work
 image: "../img/loading.gif" // [String] Define the path to a load .gif, yes I should do something cooler
},
startAtSlide: 1, // [Number] What should the first slide be?
playInterval: 5000, // [Number] Time spent on each slide in milliseconds
pauseInterval: 8000, // [Number] Time spent on pause, triggered on any navigation or pagination click
autoHeight: false // [Boolean] TODO: add this feature. Auto sets height based on each slide

License

Licensed under the Apache License, Version 2.0 (the “License”);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an “AS IS” BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Changelog

• 2.0 beta 1
  • Complete rewrite using method based pattern

• 1.1.8
  • Fixed: bug with preloading image and starting at a slide other then the first

• 1.1.7
  • Added currentClass default, thanks arronmabrey!

• 1.1.6
  • Fixed: bug with slidesLoaded function

• 1.1.5
  • New: option called slidesLoaded, a function that is called when Slides is fully loaded

• 1.1.4
  • Fixed: Minor bug with loading image not being removed
  • Added: animationStart() now gets passed the current slide number
  • Updated: Examples now use jQuery 1.5.1

• 1.1.3
  • New: Support for jQuery’s easing plugin
    • Added: fadeEasing and slideEasing defaults
  • Cleaned up JavaScript using http://jshint.com
  • Fixed: Minor bug with hoverPause

• 1.1.2
  • Changed: Width and Height is set in the CSS rather then the JavaScript
  • New: Added some helpful comments to example CSS
  • Fixed: Flash of slide content in IE
  • Updated: Better loading structure

• 1.1.1
  • New: Width and height is now a required attribute
    • This fixes numerous issues with blank slides and height
  • New: Rewrote image loading
    • Now supports multiple parent elements
    • Fixed other minor bugs
  • Fixed: Images should no longer flicker in IE

• 1.1.0
  • Fixed: Issue with images and captions example in IE6/7

• 1.0.9
  • Fixed: Using fade effect, crossfade and autoheight now works properly

• 1.0.8
  • Fixed: IE6/7 JavaScript error related to the pagination

• 1.0.7
  • New: Link to a slide from a slide. Check out /examples/Linking/ in the download
  • New: Deeplinking example added. Check out /examples/Linking/ in the download
  • Changed: Pagination no longer uses rel attribute, it now just uses href with hash

• 1.0.6
  • Changed: Pagination now targets the rel attribute versus using :eq()

• 1.0.5
  • New: Current slide number passed to animationComplete()

• 1.0.4
  • Fixed: start option bug
  • New: error correction for start option

• 1.0.3
  • Fixed: bugs related to auto height
  • New: animationStart() and animationComplete() added

• 1.0.2
  • Fixed: bug with static pagination

• 1.0.1
  • New: boolean to auto generated Next/Prev buttons
  • Width attribute is no longer set for main element
  • Fixed: pagination bug, it was set to false, should be true by default

• 1.0
  • Initial release