Adaptor is a light-weight image content slider that aims to provide a simple interface for developers to create cool 2D or 3D slide animation transitions. it has multiple options for customization including: speed of the transitions, delay between each item auto-slideshow being on/off, pauseOnHover and more.
Untuk contohnya silahkan sobat klik disini...
SCRIPT::
<link href="http://www.philparsons.co.uk/demos/box-slider/css/screen.css" rel="stylesheet"/>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js type=text/javascript></script>
<script src="http://www.philparsons.co.uk/demos/box-slider/js/box-slider-all.jquery.min.js"></script>
<script>
$(function () {
var $box = $(#box)
, $indicators = $(.goto-slide)
, $effects = $(.effect)
, $timeIndicator = $(#time-indicator)
, slideInterval = 5000
, effectOptions = {
blindLeft: {blindCount: 15}
, blindDown: {blindCount: 15}
, tile3d: {tileRows: 6, rowOffset: 80}
, tile: {tileRows: 6, rowOffset: 80}
};
// This function runs before the slide transition starts
var switchIndicator = function ($c, $n, currIndex, nextIndex) {
// kills the timeline by setting its width to zero
$timeIndicator.stop().css(width, 0);
// Highlights the next slide pagination control
$indicators.removeClass(current).eq(nextIndex).addClass(current);
};
// This function runs after the slide transition finishes
var startTimeIndicator = function () {
// start the timeline animation
$timeIndicator.animate({width: 680px}, slideInterval);
};
// initialize the plugin with the desired settings
$box.boxSlider({
speed: 1000
, autoScroll: true
, timeout: slideInterval
, next: #next
, prev: #prev
, pause: #pause
, effect: scrollVert3d
, onbefore: switchIndicator
, onafter: startTimeIndicator
});
startTimeIndicator(); // start the time line for the first slide
// Paginate the slides using the indicator controls
$(#controls).on(click, .goto-slide, function (ev) {
$box.boxSlider(showSlide, $(this).data(slideindex));
ev.preventDefault();
});
// This is for demo purposes only, kills the plugin and resets it with
// the newly selected effect FIXME clean this up!
$(#effect-list).on(click, .effect, function (ev) {
var $effect = $(this)
, fx = $effect.data(fx)
, extraOptions = effectOptions[fx];
$effects.removeClass(current);
$effect.addClass(current);
switchIndicator(null, null, 0, 0);
if (extraOptions) {
$.each(extraOptions, function (opt, val) {
$box.boxSlider(option, opt, val);
});
}
$box.boxSlider(option, effect, $effect.data(fx));
ev.preventDefault();
});
});
</script>
HTML::
<div id="page">
<div id="viewport-shadow">
<a href="#" id="prev" title="go to the next slide"></a>
<a href="#" id="next" title="go to the next slide"></a>
<div id="viewport">
<div id="box">
<figure class="slide">
<img src="http://www.philparsons.co.uk/demos/box-slider/img/the-battle.jpg"/>
</figure>
<figure class="slide">
<img src="http://www.philparsons.co.uk/demos/box-slider/img/hiding-the-map.jpg"/>
</figure>
<figure class="slide">
<img src="http://www.philparsons.co.uk/demos/box-slider/img/theres-the-buoy.jpg"/>
</figure>
<figure class="slide">
<img src="http://www.philparsons.co.uk/demos/box-slider/img/finding-the-key.jpg"/>
</figure>
<figure class="slide">
<img src="http://www.philparsons.co.uk/demos/box-slider/img/lets-get-out-of-here.jpg"/>
</figure>
</div>
</div>
<div id="time-indicator"></div>
</div>
<footer>
<nav class="slider-controls">
<ul id="controls">
<li><a class="goto-slide current" href="#" data-slideindex="0"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="1"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="2"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="3"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="4"></a></li>
</ul>
</nav>
</footer>
<aside id="effect-switcher">
<h2>Select effect</h2>
<ul id="effect-list">
<li><a href="#" class="effect current" data-fx="scrollVert3d">Vertical 3D scroll</a></li>
<li><a href="#" class="effect" data-fx="scrollHorz3d">Horizontal 3D scroll</a></li>
<li><a href="#" class="effect" data-fx="tile3d">3D tiles<span class="new-effect">new!</span></a></li>
<li><a href="#" class="effect" data-fx="tile">2D tiles<span class="new-effect">new!</span></a></li>
<li><a href="#" class="effect" data-fx="scrollVert">Vertical scroll</a></li>
<li><a href="#" class="effect" data-fx="scrollHorz">Horizontal scroll</a></li>
<li><a href="#" class="effect" data-fx="blindLeft">Blind left</a></li>
<li><a href="#" class="effect" data-fx="blindDown">Blind down</a></li>
<li><a href="#" class="effect" data-fx="fade">Fade</a></li>
</ul>
</aside>
</div>
Silahkan sobat berkeasi sendiri yaa,.. hehee,. goodluck! ^^
sumber
Posting Komentar