Compass CSS Slideshow

CSS-only slideshows that work in IE6+, Mozilla and Webkit. Requires progressive JS support to work in Opera.

Based on the work of Jenna Smith

Installation

From the command line:

sudo gem install css-slideshow

Add to a project:

// rails: compass.config, other: config.rb
require 'css-slideshow'

// command line
compass install css-slideshow

Or create a new project:

compass -r css-slideshow -f css-slideshow project_directory

Slideshows

The CSS-Slideshow works with a combination of internal links, overflow and floats.

Each slideshow contains three important elements:

- Container
    - Carousel
        - Slide(s)

You can write the HTML to your liking, but here is one example:

<section class="slideshow"><!-- container -->
  <div><!-- carousel -->

    <article id="slide1">  <!-- slide (repeat as needed) -->
      <!-- slide content -->
    </article>

  </div>
</section>

To go to a slide, all you need is a link from somewhere else on the page that points at that specific slide ID:

<a href="#slide1">a link to the first slide</a>

There's only one mixin that you need, and you apply it to your container:

.slideshow {
  @include slideshow;
}

slideshow takes three optional arguments, each with a default that you can override globaly for your project.

• The first argument is a selector for the carousel relative to the container. It defaults to "> div".
• The second is a selector for the slides relative to the carousel. This defaults to "> article".
• The third is the maximum number of slides that a given slideshow needs to support. It defaults to 10, but you can set it as high or low as you need.

Use them like so:

.slideshow {
  @include slideshow('> div', '> article', 25);
}

Available Defaults

// The selector for your carousel (relative to your container)
$slide-carousel : "> div";

// The selector for your slides (relative to your carousel)
$slide          : "> article";

// The largest number of slides that this container will need to house
$max-slides     : 10;