Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
An easy and simple image slider based on jQuery
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
images added transparent image to navigation container to fix IE bug
javascripts fixed version
stylesheets
themes added nicer shadows to mordilion-theme
LICENSE fixing chmod and adding version to the file-headers
README.md switched to version 1.5.19
example.html switched to version 1.5.19

README.md

simpleSlider - A jQuery-Plugin to create easy and simple image sliders

Version: 1.5.19

Requirements

The simpleSlider needs minimum jQuery 1.4 to run without problems.

Features

Main-Features

  • Create multiple instances of slider
  • Many good effects
  • Optional title to each image (as div or image-title-attribute)
  • Complete CSS designable
  • Public Methods to slide previous/next or restart

Effects

  • Slide (Horizontal/Vertical)
  • Overlay Slide (Horizontal/Vertical)
  • Fade & Slide (Horizontal/Vertical)
  • Blind (Horizontal/Vertical)
  • Split & Slide (Horizontal/Vertical)
  • Split & Slide (4 Squares)
  • Fade
  • Rain
  • RainGrow
  • RainRandom
  • RainWinding
  • Slice Up/Down
  • Swirl

Usage

<script type="text/javascript" src="javascripts/jquery.simpleSlider.js" />          # needed to use
<script type="text/javascript" src="javascripts/jquery.simpleSlider.effects.js" />  # if you want more effects

<script type="text/javascript">
    $(document).ready(function () {
        $('#slider').simpleSlider({
            width: 640,
            height: 360
        });
    });
</script>

...

<div id="slider">
    <ul>
        <li>
            <img src="images/example/image_01.jpg" alt="Image 01" />
            <div>
                <h3 style="margin-top: 0;">Image 01</h3>
                <p>Some more Text</p>
                <a href="http://www.link.com/" target="_blank">you can put Links into the title</a>
            </div>
        </li>
        <li>
            <img src="images/example/image_02.jpg" alt="Image 02" />
            <div>
                <h3 style="margin-top: 0;">Image 02</h3>
                <p>Extra Text</p>
                <a href="http://www.link.com/" target="_blank">you can put Links into the title</a>
            </div>
        </li>
    </ul>
</div>
Something went wrong with that request. Please try again.