Add Slider jQuery Plugins on The Blog

Yuk kembali memosting extreme tutorial. Sebelumnya Koben berbagi , sekarang mengangkat topik yang diambil dari . Buka halaman tersebut guna melihat demo, cara, dan download bumbu²nya ;) Why Beben ambil yg ini, soalnya sudah terpasang variabel slide untuk penempatan sebuah frames diatur pada CSS-nya. Pendek cerita ini slider full stylish sob :))
Semakin banyak variasi dimasukan bisa manambah nilai dongkrak tersendiri berurusan dengan konten slider jQuery plugin :D

Koben cuma membantu memasukan saja sama seperti sebelumnya ya sob ;)) :">

Ramuan ajaib

jQUery Script (minimize form)
/*
* Basic jQery Slider - jQuery plug-in v.1.1
*
* http://www.johncobb.name
* @john0514
*
* Copyright 2011, John Cobb
* Free for all to use, abuse and improve under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* August 2011
*/

<script type='text/javascript'>//<![CDATA[
(function($){$.fn.slidey=function(options){var settings={};var defaults={width:700,height:300,animation:'fade',animationDuration:450,automatic:true,rotationSpeed:4000,hoverPause:true,showControls:true,centerControls:true,nextText:'Next',prevText:"Prev",showMarkers:true,centerMarkers:true,keyboardNav:true,useCaptions:true}
settings=$.extend({},defaults,options);var $container=this;$slider=$('ul.slidey'),slides=$slider.children('li'),slideCount=slides.length,animating=false,paused=false,current=0,slidePosition=1,next=0,$active=slides.eq(current),forward='forward',back='backward'
slides.css({'height':settings.height,'width':settings.width});$slider.css({'height':settings.height,'width':settings.width});$container.css({'height':settings.height,'width':settings.width});if(settings.showControls){$controlContainer=$('<ul class="slidey-controls"></ul>');$next=$('<li><a href="#" class="slidey-next" class="controls">'+settings.nextText+'</a></li>');$previous=$('<li><a href="#" class="slidey-prev" class="controls">'+settings.prevText+'</a></li>');$next.click(function(e){e.preventDefault();if(!animating)
slideyGo(forward,false);});$previous.click(function(e){e.preventDefault();if(!animating)
slideyGo(back,false);});$next.appendTo($controlContainer);$previous.appendTo($controlContainer);$controlContainer.appendTo($container);if(settings.centerControls){$control=$next.children('a');offset=($container.height()-$control.height())/2;$next.children('a').css('top',offset).show();$previous.children('a').css('top',offset).show();}}
if(settings.showMarkers){$markerContainer=$('<ol class="slidey-markers"></ul>');$.each(slides,function(key,value){if(settings.animType=='slide'){if(key!=0&&key!=slideCount-1)
$marker=$('<li><a href="#">'+key+'</a></li>');}
else{key++
$marker=$('<li><a href="#">'+key+'</a></li>');}
$marker.click(function(e){e.preventDefault();if(!$(this).hasClass('active-marker')&&!animating)
slideyGo(false,key);});$marker.appendTo($markerContainer);});markers=$markerContainer.children('li');markers.eq(current).addClass('active-marker');$markerContainer.appendTo($container);if(settings.centerMarkers){offset=(settings.width-$markerContainer.width())/2;$markerContainer.css('left',offset);}}
if(settings.keyboardNav){$(document).keydown(function(event){if(!animating){if(event.keyCode==39){event.preventDefault();$next.addClass('active');}
else if(event.keyCode==37){event.preventDefault();$previous.addClass('active');}}});$(document).keyup(function(event){if(!paused){clearInterval(slideyInterval);paused=true;}
if(!animating){if(event.keyCode==39){event.preventDefault();slideyGo(forward,false);$next.removeClass('active');}
else if(event.keyCode==37){event.preventDefault();slideyGo(back,false);$previous.removeClass('active');}}
if(paused&&settings.automatic){slideyInterval=setInterval(function(){slideyGo(forward)},settings.rotationSpeed);paused=false;}});}
if(settings.useCaptions){$.each(slides,function(key,value){var $slide=$(value);var $slideChild=$slide.children('img:first-child');var title=$slideChild.attr('title');if(title){var $caption=$('<p class="slidey-caption">'+title+'</p>');$caption.appendTo($slide);}});}
if(settings.hoverPause&&settings.automatic){$container.hover(function(){if(!paused){clearInterval(slideyInterval);paused=true;}},function(){if(paused){slideyInterval=setInterval(function(){slideyGo(forward)},settings.rotationSpeed);paused=false;}});}
if(settings.animation=='slide'){$first=slides.eq(0);$last=slides.eq(slideCount-1);$first.clone().addClass('clone').removeClass('slide').appendTo($slider);$last.clone().addClass('clone').removeClass('slide').prependTo($slider);slides=$slider.children('li');slideCount=slides.length;$wrapper=$('<div class="slidey-wrapper"></div>').css({'width':settings.width,'height':settings.height,'overflow':'hidden','position':'relative'});$slider.css({'width':settings.width*slideCount,'left':-settings.width});slides.css({'float':'left','position':'relative','display':'list-item'});$wrapper.prependTo($container);$slider.appendTo($wrapper);}
var checkPosition=function(direction){if(settings.animation=='fade'){if(direction==forward){!$active.next().length?next=0:next++}
else if(direction==back){!$active.prev().length?next=slideCount-1:next--}}
if(settings.animation=='slide'){if(direction==forward){next=slidePosition+1;}
if(direction==back){next=slidePosition-1;}}
return next;}
if(settings.automatic){var slideyInterval=setInterval(function(){slideyGo(forward,false)},settings.rotationSpeed);}
slides.eq(current).show();$slider.show();var slideyGo=function(direction,position){if(!animating){if(direction){next=checkPosition(direction);}
else if(position&&settings.animation=='fade'){next=position-1;}else{next=position;}
animating=true;if(settings.animation=='fade'){if(settings.showMarkers){markers.eq(current).removeClass('active-marker');markers.eq(next).addClass('active-marker');}
$nextSlide=slides.eq(next);$active.fadeOut(settings.animationDuration);$nextSlide.fadeIn(settings.animationDuration,function(){$active.hide();current=next;$active=$nextSlide;animating=false;});}
else if(settings.animation=='slide'){if(settings.showMarkers){markers.eq(slidePosition-1).removeClass('active-marker');if(next==slideCount-1){markers.eq(0).addClass('active-marker');}else if(next==0){markers.eq(slideCount-3).addClass('active-marker');}else{markers.eq(next-1).addClass('active-marker');}}
$slider.animate({'left':-next*settings.width},settings.animationDuration,function(){if(next==0){slidePosition=slideCount-2;$slider.css({'left':-slidePosition*settings.width});}else if(next==slideCount-1){slidePosition=1;$slider.css({'left':-settings.width});}else{slidePosition=next;}
animating=false;});}}}
return this;}})(jQuery);//]]></script>

</head>

Kode CSS
#SlideShow {
width: 940px;
margin: 0 10px 80px;
position: relative;
}
ul.slidey {
position: relative;
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
display: none;
background: #000;
}
ul.slidey li {
display: none;
position: absolute;
}
ul.slidey li ul li {
display: block;
position: relative
}
ul.slidey-controls {
list-style: none;
margin: 0;
padding: 0;
z-index: 9999;
}
ol.slidey-markers {
list-style: none;
margin: 0;
padding: 0;
z-index: 9999;
}
ol.slidey-markers li {float: left;}
p.slidey-caption {
display: block;
width: 97%;
margin: 0;
padding: 2%;
position: absolute;
bottom: 0;
}
ul.slidey{
width: 960px;
height: 340px;
margin: 0 auto;
display: block;
background: #191919;
color: #fff;
}
ul.slidey .video-wrapper {
position: absolute;
top: 0;
left: 0;
}
ul.slidey .video-description {
position: absolute;
right: 0;
top: 0;
width: 315px;
padding: 0 10px;
}
ul.slidey .featured-post {
width: 960px;
height: 340px;
background: url(/img/bg_feature_slide.png) no-repeat;
position: relative;
}
ul.slidey .featured-post h2 {
font-family: 'Droid Sans', sans-serif;
font-weight: bold;
font-size: 40px;
margin: 0;
letter-spacing: -3px;
text-shadow: 0px 0px 1px #111;
position: absolute;
top: 30px;
left: 20px;
}
ul.slidey .featured-post ul {
position: absolute;
padding: 0;
margin: 0;
top: 125px;
}
ul.slidey .featured-post ul.list-one {
left: 20px;
}
ul.slidey .featured-post ul.list-two {
left: 380px;
}
ul.slidey .featured-post p.tag-line {
position: absolute;
left: 20px;
bottom: 12px;
font-family: 'Droid Sans', sans-serif;
font-size: 22px;
}
ul.slidey .featured-post p.tag-line a {
font-weight: bold;
}
ul.slidey .featured-post img {
position: absolute;
bottom: 30px;
right: 40px;
}
ul.slidey div.featured-post ul li {
background: url(/img/tick_list.png) no-repeat 0 2px;
padding: 0 0 0 25px;
}
ul.slidey-controls li a {
width: 10px;
height: 16px;
overflow: hidden;
text-indent: -999px;
background-image: url(/img/btn_controls.png);
position: absolute;
bottom: -30px;
}
ul.slidey-controls li a.slidey-prev {
left: 0;
}
ul.slidey-controls li a.slidey-prev:hover, ul.slidey-controls li.active a.slidey-prev {
background-position: 0 -16px;
}
ul.slidey-controls li a.slidey-next {
left: 20px;
background-position: -10px 0;
}
ul.slidey-controls li a.slidey-next:hover, ul.slidey-controls li.active a.slidey-next {
background-position: -10px -16px;
}
p.slidey-caption {
background: rgba(0,0,0,0.7);
color: #fff;
}
ol.slidey-markers {
position: absolute;
bottom: -34px;
right: 0;
}
ol.slidey-markers li {
float: left;
margin: 0 3px;
}
ol.slidey-markers li a {
display: block;
height: 16px;
width: 16px;
overflow: hidden;
text-indent: -9999px;
background:url(/img/btn_marker.png) 0 0;
border:none;
}
ol.slidey-markers li.active-marker a {
background: url(/img/btn_marker.png) 0 -16px;
}

]]></b:skin>

Download via Ziddu

Bila bahan² sudah ready, maka saatnya memasukan struktur HTML kedalam template.

HTML Structure

<center>
<div id='SlideShow'>
<ul class='slidey'>
<li>
<div class='featured-post'>
<h2>Your title here</h2>
<ul class='list-one'>
<li>Your blah bleh bloh here</li>
<li>Your blah bleh bloh 2 here</li>
<li>Your blah bleh bloh 3 here</li>
</ul>
<ul class='list-two'>
<li>Your blah bleh bloh 4 here</li>
<li>Your blah bleh bloh 5 here</li>
<li>Your blah bleh bloh 6 here</li>
</ul>
<p class='tag-line'>Your blah bleh bloh here.... <a href='http://your-link-add-here'>Title Link</a></p>
<img src='http://your-link-image.png'/>
</div>
</li>
<li>
<div class='video-wrapper'>
<iframe frameborder='0' height='340' src='http://your-link-frame-here' width='604'/>
</div>
<div class='video-description'>
<h2>Your Title Here</h2>
<p>Your blah bleh bloh here....</p>
<p>Pret by <a href='http://your-link.com'>TITLE</a></p>
</div>
</li>
<li>
<img src='http://your-link-image.jpg' title='blah bleh bloh here blah bleh bloh here blah bleh bloh here blah bleh bloh here blah bleh bloh here blah bleh bloh here'/>
</li>
</ul>
</div>
</center>

Koben tag dengan hasil berada di tengah <center> ... </center> Bila kode tersebut dihilangkan, maka slider akan berada float kiri.
Script snippet pemanggil agar bisa berjalan, langkah terakhir yang mesti dilakuin sobat tanamkan jQuery berikut tepat diatas tagging </body>

<script type='text/javascript'>//<![CDATA[
 $(document).ready(function(){
  $('#SlideShow').slidey({
   'width' : 940,
   'height' : 340,
   'showMarkers' : true,
   'showControls' : true,
   'centerMarkers' : false,
   'centerControls' : false
  });
 });//]]>
</script>

SAVE and look for result :) Good luck ;)
Basic jQuery Slider created by .
Happy slider \m/