a css-only slideshow implementation for compass
Switch branches/tags
Nothing to show
Pull request Compare This branch is 3 commits behind mirisuzanne:master.
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


in your project root directory:

git clone git://github.com/ericam/compass-css-slideshow.git extensions/compass-css-slideshow/
compass install compass-css-slideshow


Your HTML:

<div class="slideshow">
  <div class="slides">
      <!-- start slide 1 -->
      <li id="slide-title-1">
        <!-- slide content can be anything you like -->
        <div class="content">
          <h2>Slide one</h2>
          <p><a href="#slide-title-2">NEXT</a></p>
            Decima eodem modo typi qui nunc nobis videntur fiant sollemnes 
            in. Quam nunc putamus parum claram anteposuerit litterarum 
            formas humanitatis per seacula quarta decima et quinta! 
            Eleifend option congue.
      <!-- end slide 1 -->
      <!-- start slide 2 -->
      <li id="slide-title-2">  
        <!-- slide content can be anything you like -->
        <div class="content">        
          <h2>Slide Two</h2>
          <p><a href="#slide-title-1">PREV</a></p>
            Dynamicus qui sequitur mutationem consuetudium; est notare quam 
            littera? Decima eodem modo typi qui nunc nobis videntur parum 
            clari fiant sollemnes in. Diam nonummy nibh euismod tincidunt ut 
            laoreet dolore.
      <!-- end slide 2 -->

Everything inside the list-item slides is optional. Your slide navigation can be anything from next/previous links (as above) to tabs. all that matters is that they link to the slide IDs.

You can change the class of the slide container (.slideshow, .slides) elemtents given:

  • all the elements still exist
  • you override the needed variables in your _slideshow.sass

Your Sass:

// Override with the proper class names for your slide/slide-nav containers
!slide_container      ||= ".slides"
!max_slides           ||= 10

// import lightboxes
@import css-slideshow.sass

// Make a slideshow
  // Style the slideshow yourself
    background: #ccc
      padding: 1.5em
      padding: .75em
      background: #aaa