WeddingTV Carousel

by AshMokhberi

HTML

<div class="slider" id="slider" Title="Slide Show">
    <ul class="slider-area">
        <li><a href="" ><img src="http://provideocoalition.com/images/uploads/cinevate_pegasus_slider.jpg" alt="" ></a></li> <!--these are the sliders li's that slide -->
        <li><a href="" ><img src="http://provideocoalition.com/images/uploads/cinevate_pegasus_slider.jpg" alt="" ></a></li>
        <li><a href="" ><img src="http://provideocoalition.com/images/uploads/cinevate_pegasus_slider.jpg" alt="" ></a></li>                    
    </ul>
    <nav>
        <a href="" id="slider-prev" Title="Previous">&#60;</a>
        <a href="" id="slider-next" Title="Next">&#62;</a>
        <ul class="slider-indicators pagination">
        </ul>
    </nav>                    
</div>

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0;    outline: 0;    font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
/* remember to define focus styles! */
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }






/* ---------------------------------- GLOBAL STYLES ---------------------------------- */

body,html { font: 12px Lucida Grande, sans-serif; color: #676664; min-height: 100%; min-width: 1024px; background-color: #f9f8f4; margin-top: 1em; }
.container { margin: 0 auto auto; width: 960px; }
#content-area > *  { margin-bottom: 1em; }
body > *:after { content: "\00a0"; display: block; clear: both; visibility: hidden; height: 0; }
a { color: #7b8c48; text-decoration: none; } a:hover { color: #cd41bc; }
h1, h1 a { color: #c995c5; font-size: 2em; font-weight: bold; text-transform: capitalize;  } 
h2, h2 a { color: #7b8c48; font-size: 1.2em; font-weight: bold; text-transform: capitalize; }
h3, h3 a { color: #7b8c48; font-size: 12px; font-weight: bold; text-transform: capitalize; }
* > * h1, * > * h1 a, * > * h2,* > * h2 a, * > * h3,* > * h3 a { margin-bottom: 1.5em; }

p { margin-bottom: 1em; }
.tr  { text-align: right; }
.tc { text-align: center; }
.fl { float: left; } .fl + *:after { content: "\00a0"; display: block; clear: both; visibility: hidden; height: 0;...

JavaScript

/*
 *
 *    BILLY The Carousel jquery plugin v 0.5
 *    Created By Jason Howmans ([email protected])
 *    
 *    Dual licensed under the MIT or GPL Version 2 licenses.
 *
 *    -- Options
 *    
 *    - transition : 'scroll', or 'fade' ('scroll' by default)
 *    - scrollSpeed : The time a single transition will take
 *    - slidePause : Amount of time between scrolls
 *    - indicators : The target <ul> for displaying the indicators (indicators arent required for basic functionality)
 *    - indicatorLinks : Clicking on indicators jumps to slide, true by default
 *    - activeClass : Class to attach to the active indicator. default is 'active'
 *    - scrollAmount : Amount to scroll by on each transition. Set to 'auto' by default
 *    - nextLink : The element which will scroll next on click
 *    - prevLink : The element which will scroll back on click
 *    - autoAnimate : Do you want the carousel to play without the user pressing the next/prev buttons
 *    - loop : Loops back to the beginning after final slide
 *    - customIndicators : Build your own indicators. This offers developers more functionality than just a standard carousel (false by default). 
 *    - noAnimation : Turns off fancy animation, all actions will be static
 *    
 */

(function($){     
    $.fn.extend({   

        billy: function(options) { 

            // Defaults
            var defaults = {
                transition        : 'scroll',
                scrollSpeed        : 500,
                slidePause        : 4000,
                indicators        : $('ul#billy_indicators'),
                indicatorLinks    : true,
                activeClass        : 'active',
                scrollAmount    : 'auto',
                nextLink        : $('#billy_next'),
                prevLink        : $('#billy_prev'),
                autoAnimate        : true,
                loop            : true,
                customIndicators: false,
                noAnimation        : false,
 ...