Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
92 lines (71 sloc) 2.64 KB

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:// 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
Something went wrong with that request. Please try again.