The fadeslide.js from jamesplayer

fadeslide.js's Introduction

#fadeSlide.js

A jQuery carousel. Great for impressive looking home pages!

##Requirements jQuery 1.*

##Demo 2012 NZ International Arts Festival

##Usage example

###HTML

<div class="slider">
    <a class="fs_next" href="#">Next</a> <!-- can be placed anywhere on page -->
    <a class="fs_prev" href="#">Prev</a> <!-- can be placed anywhere on page -->
    <div class="fs_container">
        <div class="fs_slide"><img src="/photo1.jpg" alt="rock!" /></div>
        <div class="fs_slide"><img src="/photo2.jpg" alt="rock!" /></div>
        <div class="fs_slide"><img src="/photo3.jpg" alt="rock!" /></div>
        <div class="fs_slide"><img src="/photo4.jpg" alt="rock!" /></div>
    </div>
</div>

###Javascript

$(".slider").fadeslide({
    slideEasing : "easeInOutExpo" //requires jQuery Easing extension
});

###Some custom css

/**** Slider height ****/
.slider {
    height: 192px;
}

/**** Previous and next buttons ****/
.fs_next, .fs_prev {
    background-color: #fff;
    position: absolute;
    bottom: 0;
    display: block;
    padding: 0 5px;
    height: 20px;
    line-height: 20px;
    z-index: 5;
}

.fs_next { right: 0; }
.fs_prev { left: 0; }

##Options

selectedSlide: Int the slide to start on. Default 1
containerClass: String the class name of the container element. Default 'fs_container'
slideClass: String the class name of the slide elements. Default 'fs_slide'
nextClass: String the class name of the 'next' button element. Default 'fs_next'
prevClass: String the class name of the 'previous' button element. Default 'fs_prev'
slideSpeed: Int how fast the transition between slides is in milliseconds. Default 1000
slideEasing: String the name of the easing function to use for transitions. Default 'linear'
autoSlide: Bool whether or not to slide automatically (will stop when container is hovered over). Default true
slideInterval: Int only used when autoSlide is set to true. Time between slides. Default 5000

Recommend Projects