A vanilla Javascript and CSS3 slider.
CSS JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
img
.gitignore
.htaccess
Gruntfile.js
README.md
method1.html
method2.html
package.json
simpleslider-1.3.min.css
simpleslider-1.3.min.js
simpleslider.css
simpleslider.js
simpleslider.src.css

README.md

SimpleSlider v1.3

http://jalproductions.co.uk/projects/SimpleSlider/

A vanilla Javascript and CSS3 slider.

About

SimpleSlider is a responsive slider script written using pure Javascript (no libraries).

The images will scale to completely fill the wrapper leaving no whitespace, similar to background-size:cover

All animations are done using CSS3, which means to see the beautiful transitions you'll have to be using a modern browser, but it will still gracefully degrade for older browsers.

The project is open source; use the issue tracker to submit bugs or change requests.

I would love to know if you're using SimpleSlider. Contact me and I'll feature your site.

Creative Commons License

Browser support

  • Chrome 24+
  • Firefox 18+
  • Opera 20+
  • Safari 5.1.7
  • IE7+

How to use

If you are comfortable adding images in HTML, you can use this method:

1 - Set up your markup and add your images. Any <img> tags you add within <div id="ss__wrapper"> will become part of the slider.

<div id="simpleslider">
	<div id="ss__wrapper">
		<img src="img/image1.jpg" alt="An orange image" class="current"/>
		<img src="img/image2.jpg" alt="A larger image with a different proportion to ss"/>
		<img src="img/image3.jpg" alt="A portrait image"/>
	</div>
	<div id="ss__controls">
		<div id="ss__prev"><div id="ss__prevChev"></div></div>
		<div id="ss__next"><div id="ss__nextChev"></div></div>
		<div id="ss__dots"></div>
	</div>
</div>

2 - Link to simpleslider.css in the <head> tag:

<link rel="stylesheet" type="text/css" href="simpleslider.css"/>

3 - Include simpleslider.js just before the </body> tag:

<script src="simpleslider.js"></script>

4 - SimpleSlider's dimensions are set using a width:height ratio. The width will always be 100% of its parent container.

5 - Initiate SimpleSlider and pass through the width:height ratio as the parameter:

<script>
	simpleslider('16:9');
</script>

SimpleSlider can also load a set number of images from a specified directory, without having to specify them in the HTML:

1 - Set up your markup, this time leaving the ss__wrapper container empty:

<div id="simpleslider">
	<div id="ss__wrapper"></div>
	<div id="ss__controls">
		<div id="ss__prev"><div id="ss__prevChev"></div></div>
		<div id="ss__next"><div id="ss__nextChev"></div></div>
		<div id="ss__dots"></div>
	</div>
</div>

2 - Link to simpleslider.css in the <head> tag:

<link rel="stylesheet" type="text/css" href="simpleslider.css"/>

3 - Include simpleslider.js just before the </body> tag:

<script src="simpleslider.js"></script>

4 - SimpleSlider's dimensions are set using a width:height ratio. The width will always be 100% of its parent container.

5 - Initiate SimpleSlider. Pass SimpleSlider the width:height ratio, how many images to load, the directory in which they belong and the filename prefix:

<script>
	simpleslider('16:9', 3, "img/directory", "prefix");
</script>