Jquery Otomatik resim slayt galerisi yapımı

Sliderlar sitemizi güzelleştirmek ve önemli konuları ön plan da tutmak için kullandığımız görsel öğelerdir. Bloglarınızın daha şık, görsel olarak daha orjinal ve güzel görünmesini sağlayacak bir slider eklentisini paylaşacağım bugün sizlerle. Sağdan sola dogru kayan, numaralandırmalı, kırmızı kurdelesiyle çok şık bir slider. Uygulaması kolay ve herkesin blogunda, sitesinde kullanabileceği güzel bir eklenti.

● Jquery Otomatik Galeri Slider
● jQuery Auto Slider
● Automatic Image Slider with CSS & jQuery
● Html Kodlarıyla Otomatik resim galerisi yapımı
● jQuery Auto Image Slideshow

Blogger'a Ekleme

1. Blogger Kumanda Panelinize gidin
2. Yerleşim tıklayın
3. Gadget/Widget Ekle
4. HTML / JavaScript seçeneğini seçin.
5. Aşağıdaki kodu kopyalayın ve yapıştırın.

<style type="text/css">
.container1{width:660px;margin:0;padding:0;}
.folio_block{position:absolute;left:50%;top:50%;margin:-140px 0 0 -395px;}
.main_view{float:left;position:relative;}
.window{height:240px;width:660px;-moz-box-shadow:0 0 5px #303030;-webkit-box-shadow:0 0 5px #303030;box-shadow:0 0 5px #303030;border:1px solid #000;margin:0;overflow:hidden;position:relative;}
.image_reel{position:absolute;top:0;left:0;}
.image_reel img{float:left;}
.paging_btrix{position:absolute;bottom:10px;right:-7px;width:178px;height:47px;z-index:100;text-align:center;line-height:40px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgMcqDqUuyjBYhzRbuDj8XB0OpOrQ_w3zPX7wvSFs86fDqf1NyPpEVYBFIHp-bYdGOmYU7GeA7bu6MT5VxqiMvhYLAWh1dVkVWeDkqF0na3ppWr-cPmhpsYsmHhyjaknuvnxZSB6MkNsIY/s320/paging.png) no-repeat;display:none;}
.paging_btrix a{text-decoration:none;color:#fff;padding:5px;}
.paging_btrix a.active{font-weight:700;background:#920000;border:1px solid #610000;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;}
.paging_btrix a:hover{font-weight:700;}
</style>
<div class="container1">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://i.imgur.com/lZN7Lql.jpg"><img src="http://i.imgur.com/lZN7Lql.jpg" alt="Meftun Apart Fethiye" /></a>
<a href="http://i.imgur.com/rPXebHN.jpg"><img src="http://i.imgur.com/rPXebHN.jpg" alt="Resmin Tanımı" /></a>
<a href="http://i.imgur.com/H13Lrjy.jpg"><img src="http://i.imgur.com/H13Lrjy.jpg" alt="Resmin Tanımı" /></a>
<a href="http://i.imgur.com/MpBPxIB.jpg"><img src="http://i.imgur.com/MpBPxIB.jpg" alt="Resmin Tanımı" /></a>
<a href="http://i.imgur.com/Y1BVB1I.jpg"><img src="http://i.imgur.com/Y1BVB1I.jpg" alt="Resmin Tanımı" /></a>
<a href="http://i.imgur.com/YdVO1UW.jpg"><img src="http://i.imgur.com/YdVO1UW.jpg" alt="Resmin Tanımı" /></a>
<!--Burdan itibaren yukarıdaki şekilde resimlerinizi çoğaltabilirsiniz-->
</div>
</div>
<div class="paging_btrix">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>
<a href="#" rel="6">6</a>
<!--Burdan itibaren kaç tane resim eklediyseniz numaralandırmasını ekleyin-->
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){$(".paging_btrix").show();$(".paging_btrix a:first").addClass("active");var imageWidth=$(".window").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_btrix a").removeClass('active');$active.addClass('active');$(".image_reel").animate({left:-image_reelPosition},500)};rotateSwitch=function(){play=setInterval(function(){$active=$('.paging_btrix a.active').next();if($active.length===0){$active=$('.paging_btrix a:first')}rotate()},
5000)};rotateSwitch();$(".image_reel a").hover(function(){clearInterval(play)},function(){rotateSwitch()});$(".paging_btrix a").click(function(){$active=$(this);clearInterval(play);rotate();rotateSwitch();return false})});
</script>

Kodu denemek için Online html editor'ü kullanabilirsiniz.
Yukarıdaki kırmızı ile belirttiğim alanları kendinize göre düzenlemeyi unutmayın! Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

Live Demo

123456