web design: Slider Image Untuk Blog

Slider Image Untuk Blog

Slider Image Untuk Blog

pertemuan kali ini saya akan memberikan slider image yang sangat cocok dipasang untuk blog kamu, dengan tampilan yang pilihan posting gambar dan dapat memilih dengan mengeklik pada nomornya. untuk dapat membangun slidernya kita membutuhkan tag css, html, dan Javascript. mari kita langsung saja menuju TKP.

Tag HTML nya

<div class="main_slider">
<div class="window_slider">
<div class="image_reel">
<a href="#link_post">
<img width="600px" height="400px" alt="Slider Image untuk blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI2jj3QATurEYNOJ_Y4w-AJXpkIYVI1t1cPkZsDclhhhlo0iW72qXT7LNpd-6KvXl6N62jp39DtGJKcD_8rLRxSiUGT1WtYTip4JEJksTx_Ha5p-3HgSpRCYglcOrwGYewysUqcfOcVe_L/s1600/slide-1-728.jpg"></img>
</a>
<a href="#link_post">
<img width="600px" height="400px" alt="Slider Image untuk blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMQLMfiLmXGUSoUJGtDGH0QZoGWJyGRCNcPnWb5PK33zZ7_DrWENtv-gR2j3vN5q6XE97TUBzQ5iG_F6ingva4a6hU2n82iteulyhfJptB2qwlUHcY-M_ixBiAErXankN1iEzNOCUbWOws/s1600/lt_growth2013_co_53_powerpoint_templates_title_slide.jpg"></img>
</a>
<a href="#link_post">
<img width="600px" height="400px" alt="Slider Image untuk blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN9KFGiCOdNx2SxuQKdYMDahWwsktGwrg2hR8vtVrEELiy9iFmVJR8oOchmXVAkVS_VQouNC3rEyb-WbzEouDRtjrkPv3gkWuWlVnmMFROBKhryd_d1JmZpCjO3InqeEmv7UP1ThJ2sgCR/s1600/903-PowerPoint+2010+TP+-+Reading+View.jpg"></img>
</a>
<a href="#link_post">
<img width="600px" height="400px" alt="Slider Image untuk blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiecdLYlNm1TpQKFEraFboCtTVYNWL_ZtFFdQ-Q2c_bPXe371CBRvEKZyDqMRxY58M7zwXxXeLZ1aOm4iKKorEkPOrIwe-a4aa9_wEIUvXBVdyY1nZKcuZ4Carv0elCQMkII3he17TQDn5Q/s1600/Slide15.jpg"></img>
</a>
</div>
</div>
<div class="paging" style="display: block;">
 <a class="active" rel="1" href="25"> 1 </a>
 <a class="" rel="2" href="221"> 2 </a>
 <a class="" rel="3" href="514"> 3 </a>
    <a class="" rel="4" href="155"> 4 </a>
 </div>
</div>

Tag CSSnya

Javascript

<script src="https://doc-0s-94-docs.googleusercontent.com/docs/securesc/ablidbh4rht10l23pgj24kkl3nnec7sj/l2u7l2fv92udc4usvgbp97il3jakj3vh/1405058400000/11363352952214392690/11363352952214392690/0B9OR40LPow7obXo4S3ZtQ00zYmM?e=download&h=16653014193614665626&nonce=cvmql6pu44uso&user=11363352952214392690&hash=vlhrai0cp2ve4fb9kiknnn70gpr0gelv" type="text/javascript"></script>
<script type="text/javascript">
      
$(document).ready(function() {
$(".paging").show();
$(".paging a:first").addClass("active");
var imageWidth = $(".window_slider").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){
var triggerID = $active.attr("rel") - 1; 
var image_reelPosition = triggerID * imageWidth; 
$(".paging a").removeClass('active');
$active.addClass('active'); 
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
rotateSwitch = function(){
play = setInterval(function(){ 
$active = $('.paging a.active').next();
if ( $active.length === 0) { 
$active = $('.paging a:first');
}
rotate(); 
}, 7000); 
};
rotateSwitch();
$(".image_reel a").hover(function() {
clearInterval(play);
}, function() {
rotateSwitch();
});
$(".paging a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotateSwitch();
return false;
});
});

</script>

File nya dapat dilihat hasilnya dan dapat diunduh berikut ini :

Demo Unduh