mintik

Bir  web sitesi için en önemli  özelliklerden biri de  sitenin en üstünde  slayt manşet bölümünün olmasıdır. Bu sayede önemli olayları ve uygulamaları ziyaretçilerimize daha hızlı tanıtabiliriz. Her  tasarım için her türlü slider  uygulaması uyumlu olmaz  her zaman. Ara sıra  çok sade örnekler bile site  tasarımı ile oldukça uyumlu görünür. Bu yüzden kullanışlı olan ve olmayan her türlü örneği sizlerle paylaşmak daha mantıklı geliyor  bana. Bu yüzden bunda fazla özellik yok diye paylaşmamak pek doğru bir karar değil sanırım.

Brian Blocker’in geliştirdiği jQuery  Sideswap uygulaması bahsettiğim türden çok sade  bir slider  örneğidir. Kimilerine göre  modern tasarımlara uygun görülemeyebilir ama ortada  tasarımı  bozacak bir özelliği yok uygulamanın. Siz sağ ve sol tarafta bulunan oklara  tıklamadığınız sürece resimler değişmiyor. Manşet  olarak kullanılamayabilir ama bir  resim galeri inceleme için gerekli yeteneğe sahip. Belki resimleri değiştirmek için kullanılan sağ ve sol ok tuşlarını beğenmeyebilirsiniz. Onları da kendinize  göre değiştirmek oldukça basit. Küçük bir ok işareti dahi ekleseniz ortaya güzel bir sonuç çıkar.

Mouse resimlerin üzerine geldiği  anda sağ ve sol ok işaretleri görünüyor. Mouse resimlerin üzerinde olmadığı zaman ok işaretleri görünmüyor. Facebook üzerinden galerilerdeki resimleri incelerken de buna benzer bir şey olduğunu fark etmişsinizdir mutlaka. Az çok Facebook benzeri resim galeri örneği diyebiliriz  bu uygulamaya. Sitenize kolaylıkla ekleyebileceğiniz bir resim galeri inceleme örneği.

 

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya  adresleri :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.sideswap.js"></script>

JavaScript :

<script type="text/javascript">
$(window).load(function()
{
	$('#rotating-elements').sideswap({
		next : '<img src="next.png" />',
		previous : '<img src="prev.png" />',
		transition_speed : 100
	});
});
</script>

Css :

#container { position: relative; width: 800px; margin: 50 auto; }
#rotating-elements { background: #333; border: #678; z-index: 5; padding: 0px; height: 200px; }
.element-rotated { height: 200px; color: #fff; width: 100%; }
.sideswap_nav { position: absolute; cursor: pointer; }
.sideswap_next { bottom: 0px; right: 0px; z-index: 1000; }
.sideswap_previous { bottom: 0px; left: 0px; z-index: 1000; }

• Body  etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div id="container">
	<div id="rotating-elements">
		<div class="element-rotated">
			<img src="img/1.jpg" width="800" height="200" />
		</div>
		<div class="element-rotated">
			<img src="img/2.jpg" width="800" height="200" />
		</div>
		<div class="element-rotated">
			<img src="img/3.jpg" width="800" height="200" />
		</div>
	</div>
</div>