Submit your widget

Super cool jQuery and CSS3 slider effect

Created 4 years ago   Views 34463   downloads 7134    Author dirkgroenen
Super cool jQuery and CSS3 slider effect
View DemoDownload 2.0 MB
47
Share |

This is a simple slider that does what a simple slider has to do: slide slides!

Include jQuery, simpleSlider.js, touchSwipe.js (optional if you want touch support) and transit.js in yourhead. The slider will automatically change transit's useTransitionEnd property to true. You can disable this by setting updateTransit: false in your options.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript" src="transit.js"></script>
<script type="text/javascript" src="touchswipe.js"></script>
<script type="text/javascript" src="jquery.simpleslider.js"></script>

Add a div to your site containing the slides. The standard name for these divs are .slider and .slide, but these can be changed in the options object.

<div class='slider'>
    <div class='slide'>
        <div class='slidecontent'>
            <h1>Solar Dolar Wolar Woot</h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere cursus euismod.Aenean ut tortor leoing elit. Etiam posuere cursus euismod.Aenean ut tortor leo.</h2>
        </div>
    </div>
    <div class='slide' >
        <div class='slidecontent'>
            <h1>Solar Dolar Wolar Woot</h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere cursus euismod.Aenean ut tortor leo.</h2>
        </div>
    </div>
</div>

Read more:https://github.com/dirkgroenen/simple-jQuery-slider