Skip to content

A slider that uses CSS3 and jQuery to make a billboard flipper slider

Notifications You must be signed in to change notification settings

tareqlol/BillBoard-Slider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 

Repository files navigation

BillBoard-Slider

A slider that uses CSS3 and jQuery to make a billboard flipper slider



Usage:

The HTML:

   <div class="billboard-rotater">
        <ul class="imgs">
            <li>
                <img src="1.jpg" /></li>
            <li>
                <img src="2.jpg" /></li>
            <li>
                <img src="3.jpg" /></li>
            <li>
                <img src="4.jpg" /></li>
        </ul>
    </div>

The JavaScript:

   $('.billboard-rotater').billboard({
    colWidth: 30, // For Speed and optimizations ** set '100%' to make it as one cube.
    transitionSpeed: 1, // Accepts decimal numbers and int Numbers
    transitionDelayMultiplier: .1, // Delay between columns to show the BillBoard Effect , set to 0 to Disable it.
    optimizeOutput: true, // to Remove repating columns background , set to false if you want to show the columns
    dimensionalOutput: 'cube', // accepts string 'cube' or 'flat' ; flat will only show the first two images one for each of the flat columns
    billCallBack: function () { }// Call back function runs right after the plugin finishes constructing itself
   });

About

A slider that uses CSS3 and jQuery to make a billboard flipper slider

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published