a css-only slideshow implementation for compass
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


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


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


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 -->


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;