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 -->
</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);
}
// 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;