Skip to content
jQuery: slideshow displaying images + description, ~1kb for js+css, simple and elegant
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
README.markdown
index.html
minify.sh
s3-slider.css
s3-slider.js
s3-slider.min.css
s3-slider.min.js

README.markdown

S3 Slider is a simple slideshow that displays images with their description.
This is an complete rewrite to make it smaller / simpler / more elegant.

Works in IE6 + the rest.

Demo(older version, new looks similar) or download it and open index.html

Installation

Download s3-slider.js / s3-slider.css (choose minified version for production).

<div id="slider">
  <div class="slide">
    <img src="demo/1.jpg"/>
    <span> <b>A Tile is good</b><br/>Some text long or short text should be placed here to inform customers of your great products...</span>
  </div>
  <div class="slide">
    <img src="demo/4.jpg"/>
    <span> Finally a short text...</span>
  </div>
</div>

<script>
jQuery(function($){
  $('#slider').s3Slider({timeout:6000,fadeTime:1000});
});
</script>

In IE6 the animation will start with a instant fade from blank->image, if you do no like this, make the first slide visible (display:block)

Options

timeout : miliseconds or 'slow'/'fast'     default: 6000
fadeTime : miliseconds or 'slow'/'fast'    default: 1000
spanOpacity : opacity of description span  default: 0.7

Authors

Michael Grosser
michael@grosser.it
License: MIT

Contributors

Original

Developped By: Boban Karišik
CSS Help: Mészáros Róbert

You can’t perform that action at this time.