Create Slider Image With Skitter Slideshow jQuery

Kali ini kita akan belajar membuat 'Skitter – Feature Rich jQuery Slideshow Plugin With Classy Animations'. :D

Bergerak dgn cepat adalah jQuery Plugin fitur slideshow yang kaya yang datang dengan 22 animasi yang unik dan halus. Ini memiliki pilihan transisi berbagai kustomisasi seperti efek kecepatan, interval dan animasi. Bergerak dgn cepat menawarkan kontrol pagination dan navigasi yang memungkinkan pengguna untuk mendorong slideshow seperti mereka suka.

CSS::

/* Skitter styles */
.box_skitter {position:relative;width:800px;height:300px;background:#000;}
.box_skitter img { max-width:none; } /* Tip for stildv */
.box_skitter ul {display:none;}
.box_skitter .container_skitter {overflow:hidden;position:relative;}
.box_skitter .image {overflow:hidden;}
.box_skitter .image img {display:none;}

/* Box clone */
.box_skitter .box_clone {position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20;}
.box_skitter .box_clone img {position:absolute;top:0;left:0;z-index:20;}

/* Navigation */
.box_skitter .prev_button {position:absolute;top:50%;left:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(http://thiagosf.net/projects/jquery/skitter/images/prev.png) no-repeat left top;}
.box_skitter .next_button {position:absolute;top:50%;right:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(http://thiagosf.net/projects/jquery/skitter/images/next.png) no-repeat left top;}

/* Numbers */
.box_skitter .info_slide {position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:bold 11px arial;padding:5px 0 5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.75;}
.box_skitter .info_slide .image_number {background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
.box_skitter .info_slide .image_number_select {background:#cc0000;float:left;padding:2px 10px;margin:0 5px 0 0;}

/* Thumbs
Change width and height to customization dimension thumb
*/
.box_skitter .container_thumbs { position:relative;overflow:hidden;height:50px; }
.box_skitter .info_slide_thumb { height:50px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;top:auto;top:0;left:0;padding:0 !important;opacity:1.0; }
.box_skitter .info_slide_thumb .image_number { overflow:hidden;width:100px;height:50px;position:relative;margin:0 !important; padding:0 !important; -moz-border-radius:0 !important;-webkit-border-radius:0 !important;border-radius:0 !important;}
.box_skitter .info_slide_thumb .image_number img { position:absolute;top:-30px;left:-30px;height:100px;}
.box_skitter .box_scroll_thumbs { padding:0; }
.box_skitter .box_scroll_thumbs .scroll_thumbs { position:absolute;bottom:60px;left:50px;background:#ccc;background:-moz-linear-gradient(-90deg, #555, #fff);background:-webkit-gradient(linear, left top, left bottom, from(#555), to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101; cursor:pointer;border:0px solid #333; }

/* Dots */
.box_skitter .info_slide_dots {position:absolute;bottom:-40px;z-index:151;padding:5px 0 5px 5px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}
.box_skitter .info_slide_dots .image_number {background:#333;float:left;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;}
.box_skitter .info_slide_dots .image_number_select {background:#cc0000;float:left;margin:0 5px 0 0;}

/* Loading */
.loading {position:absolute; top:50%; right:50%; z-index:10000; margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:url(http://thiagosf.net/projects/jquery/skitter/images/ajax-loader.gif) no-repeat left top;width:32px;height:32px;}

/* Label */
.box_skitter .label_skitter     { z-index:150;position:absolute;bottom:0px;left:0px;display:none; }
.box_skitter .label_skitter     { z-index:150;position:absolute;bottom:0px;left:0px;color:#fff;display:none;opacity:0.8;background:#000; }
.box_skitter .label_skitter p     { padding:10px;margin:0;font:normal 22px arial,tahoma;letter-spacing:-1px; }
.box_skitter .info_slide *         { font-family:Consolas,arial,tahoma !important; }
.box_skitter .progressbar         { background:#000; position:absolute; top:5px;left:15px;height:5px; width: 200px; z-index:99; border-radius:20px; }

/* Preview slide */
.box_skitter .preview_slide { display:none; position:absolute; z-index:152; bottom:30px; left:-40px; width:100px; height:100px; background:#fff; border:1px solid #222; -moz-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px; -webkit-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px; box-shadow:rgba(0,0,0,0.7) 2px 2px 5px; overflow:hidden; }
.box_skitter .preview_slide ul { height:100px; overflow:hidden; margin:0; list-style:none; display:block; position:absolute; top:0; left:0; }
.box_skitter .preview_slide ul li { width:100px; height:100px; overflow:hidden; float:left; margin:0; padding:0; position:relative; display:block; }
.box_skitter .preview_slide ul li img { position:absolute; top:0; left:0; height:150px; width:auto; }

/* Focus */
#overlay_skitter {position:absolute; top:0; left:0; width:100%; z-index:9998; opacity:1; background:#000; }

.box_skitter .focus_button {position:absolute;top:50%;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(http://thiagosf.net/projects/jquery/skitter/images/focus-button.png) no-repeat left top;opacity:0;}
.box_skitter .play_pause_button {position:absolute;top:50%;z-index:151;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(http://thiagosf.net/projects/jquery/skitter/images/pause-button.png) no-repeat left top;opacity:0;}
.box_skitter .play_pause_button.play_button {background:url(http://thiagosf.net/projects/jquery/skitter/images/play-button.png) no-repeat left top;}

/* Example for dimenions */
.box_skitter_large {width:800px;height:300px;}
.box_skitter_small {width:200px;height:100px;}

SCRIPT::

<script type="text/javascript" src="http://thiagosf.net/projects/jquery/skitter/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://thiagosf.net/projects/jquery/skitter/js/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="http://thiagosf.net/projects/jquery/skitter/js/jquery.skitter.min.js"></script>


<script>
$(document).ready(function() {
$(".box_skitter_large").skitter({
   numbers_align: "center",
    dots: true,
    preview: true,
    focus: true,
    focus_position: "leftTop",
    controls: true,
    controls_position: "leftTop",
    progressbar: true,
    progressbar_css: {
    top:'5px',
    left:'590px',
    height:10,
    borderRadius:'2px',
    width:200,
    backgroundColor:'#000',
    opacity:.7
   },
    animateNumberOver: { 'backgroundColor':'#555' },
    enable_navigation_keys: true
});
});
</script>

HTML::

<section class="border-skitter content-width">
    <div class="box_skitter box_skitter_large">
     <ul>
      <li><a href="#cut"><img src="http://thiagosf.net/projects/jquery/skitter/images/001.jpg" class="cut" /></a><div class="label_text"><p>cut</p></div></li>
<li><a href="#swapBlocks"><img src="http://thiagosf.net/projects/jquery/skitter/images/002.jpg" class="swapBlocks" /></a><div class="label_text"><p>swapBlocks</p></div></li>
<li><a href="#swapBarsBack"><img src="http://thiagosf.net/projects/jquery/skitter/images/003.jpg" class="swapBarsBack" /></a><div class="label_text"><p>swapBarsBack</p></div></li>
<li><a href="#swapBars"><img src="http://thiagosf.net/projects/jquery/skitter/images/004.jpg" class="swapBars" /></a><div class="label_text"><p>swapBars</p></div></li>
<li><a href="#hideBars"><img src="http://thiagosf.net/projects/jquery/skitter/images/005.jpg" class="hideBars" /></a><div class="label_text"><p>hideBars</p></div></li>
<li><a href="#downBars"><img src="http://thiagosf.net/projects/jquery/skitter/images/006.jpg" class="downBars" /></a><div class="label_text"><p>downBars</p></div></li>
<li><a href="#upBars"><img src="http://thiagosf.net/projects/jquery/skitter/images/007.jpg" class="upBars" /></a><div class="label_text"><p>upBars</p></div></li>
<li><a href="#cubeShow"><img src="http://thiagosf.net/projects/jquery/skitter/images/008.jpg" class="cubeShow" /></a><div class="label_text"><p>cubeShow</p></div></li>
<li><a href="#circlesRotate"><img src="http://thiagosf.net/projects/jquery/skitter/images/009.jpg" class="circlesRotate" /></a><div class="label_text"><p>circlesRotate</p></div></li>
<li><a href="#circlesInside"><img src="http://thiagosf.net/projects/jquery/skitter/images/010.jpg" class="circlesInside" /></a><div class="label_text"><p>circlesInside</p></div></li>
     </ul>
    </div>
   </section>