Log in Sign Up

SlideIO - A Simple In/Out Slideshow

This is a simple jQuery slideshow plugin based on one effect: sliding in and out (well, it also does a fade if you want). To see what it looks like in action, check out the demo.

We needed a basic slideshow that met the following criteria:

  • Easy to implement
  • Could move a series of slides in and out from any position (top, left, right, etc.)
  • Could contain images and HTML

Implementation

slideIO will take all of the children of the element it is applied to and slide them from their current position to top:0; left:0;. Here is a basic implementation that utilizes all of the default settings (these are easily overridden by passing in an options object):

The HTML

<div class="slide-wrap">
  <div class="slide">
    <img src="mySlide.jpg" alt="Slide" />
  </div>
  <div class="slide">
    <h1>Welcome to our site</h1>
  </div>
  <div class="slide">
    <img src="anotherSlide.jpg" alt="More" />
  </div>
</div>

The CSS

In order for the slideshow to work properly, the parent container must have position:relative; set in the CSS, and the slides themselves should have position:absolute; set. Here is the basic CSS:

/* Set the width and height of the wrapper and the slides */
.slide-wrap,
.slide-wrap .slide {
    width:900px;
    height:300px;
}

.slide-wrap {
    position:relative;
    overflow:hidden;
}

/* Slides will come in from the top in this case */
.slide-wrap .slide {
    position:absolute;
    top:-300px;
    left:0;
}

To determine the direction of the sliding action, just set the original location of the slides to the starting position, and the plugin will animate them in and out from their relative 0 position.

The JavaScript

The default implementation is very easy in JavaScript. Just make sure you include the jQuery and plugin scripts, then apply the plugin to the slide wrapper container. If you are already including jQuery, leave out the first script declaration. However, make sure you are using jQuery 1.4+. This plugin utilizes features that will cause problems with earlier versions of the jQuery library.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slideIO.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
    $(".slide-wrap").slideIO();
  });
</script>

Using Options

The plugin allows you to pass in an options object. Here are the defaults:

{
  inSpeed: 500,                                                                      
  outSpeed: 300,
  delay: 7000,
  showFirst: false,
  wait: 500,
  easeIn: "swing",
  easeOut: "swing",
  inOpacity: 1,
  outOpacity: 1,
  mousePause: true,
  left: $panels.eq(0).css("left"),
  top: $panels.eq(0).css("top")
}

To override the defaults, pass in a new defaults object with any updated options. Suppose you don't want a "wait" time between sliding out and sliding back in, and you only want the slide to show ("delay") for 5 seconds. Here's what you would do:

<script type="text/javascript">
  $(document).ready(function() {
    $(".slide-wrap").slideIO({
      wait: 0,
      delay: 5000
    });
  });
</script>

Options

Option Default Value Description
inSpeed 500 The time it takes to move the slide in. Measured in milliseconds.
outSpeed 300 The time it takes to move the slide out. Measured in milliseconds.
delay 7000 How long to display the slide before switching to the next one. Measured in milliseconds.
showFirst false If set to true, the first slide is displayed in place without sliding in.
wait 500 How long to wait, after sliding out, before a new slide moves in. Measured in milliseconds.
easeIn "swing" The easing method to use when moving the slide in. Add the Easing Plugin if you want to try anything other than "linear" and "swing". For a full list, check out this list from commadot.com
easeOut "swing" The easing method to use when moving the slide out.
inOpacity 1 The opacity of the slide when shown. Be careful of this one when combined with transparent PNGs on Internet Explorer. Nasty black edges may result.
outOpacity 1 The ending opacity of the slide after it is moved out. To fade out completely, use 0. See the warning about IE above.
mousePause true Set this to false if you want the animation to continue even if the mouse is hovering over the slide. By default, the animation pauses when the mouse is hovering over the slide.
left $panels.eq(0).css("left") By default, the "out" position of the slide is pulled from the left CSS attribute of the first panel. You can override this by putting some other value in (including pixels). For example, "20px".
top $panels.eq(0).css("top") Similar to left, but setting the "out" position of the top. Normally taken from the top CSS attribute of the first panel. Override with a pixel value. For example: "20px".

Demo

View demo

Revision History

Version 0.2

First public release.

Version 0.3.1 (current)

Support for multiple galleries on the same page added.

Downloads

Try MagicEdit today!

Sign Up for free Demo
Scroll to Top