jQuery ve CSS3 Kullanarak Basit Çok Ürünlü Slider Yapmak 0

jQuery ve CSS3 kullanarak alıştığımız sliderlerin dışında çok ürünlü slider yapımını anlatıcam sizlere. Eticaret sitesi yapıyorsanız kesinlikle tasarımlarınızda bu tarz bir özellik düşüneceksiniz.

https://3.bp.blogspot.com/--ew5_Csbuss/UOHLZ2GoJ0I/AAAAAAAANwE/0NBFsgVi4CE/s1600/jquery-coklu-slider1.jpg

HOW TO CREATE A SIMPLE MULTI-ITEM SLIDER

Bunu kullanırken Kategori mantığında düşünün. Shoes, Accessories, Watches, Bags birer kategori ve kategori ürünleri listelenecek. Her biri farklı bir ürün olduğu için normal Slider’lerden daha iyi olduğunu düşünüyorum.

Tek tek kodlarıyla birlikte anlatıcaktım ama biraz uzun sürdü birde yeni css3 kodları var daha onları anlatmadan size anlatırsam yarım kalıcaktı en iyisi sonra anlatırım diyim geçiştireyim 🙂
Demo / Download

jQuery Tab Menü Eklentisi ve Kullanımı 0

Merhabalar. Beğendiğim bir jQuery tab menüyü sizlerle paylaşıyorum.

https://2.bp.blogspot.com/-2CKGLF4STCk/UexAo-Hr-OI/AAAAAAAASHI/vi9LqEPt16Q/s1600/Tabulous.jpg

Tasarımcılar için kesinlikle öneriyorum yeni yaptığınız web sitelerinde böyle güzel tab menüler kullanırsanız web siteleri daha şık olacaktır. 🙂

tabulous.js

Demo / Download

Kurulumu ise alttaki gibi;

HTML head tagları arasına alttaki gibi ekliyoruz. Yanlız burada bilmeniz gereken bu eklenti 1.7.2 sürümünde denenmiş ve çalışıyor siz hangi sürümde deneyeceksiniz bilmiyorum çakışma ihtimali olabilir. Birde sizin kullandığınız bir sürüm var ise alttaki jquery.min.js’yi kaldırın.

<link href='tabulous.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="tabulous.js"></script>

Daha sonra jQuery tab menümüzü oluşturacağız. HTML’i artık tab nerede olacaksa oraya ekliyorsunuz.

<div id="tabs">
		<ul>
			<li><a href="#tabs-1" title="">Tab 1</a></li>
			<li><a href="#tabs-2" title="">Tab 2</a></li>
			<li><a href="#tabs-3" title="">Tab 3</a></li>
		</ul>

		<div id="tabs_container">

			<div id="tabs-1">
				<!--tab content-->
			</div>

			<div id="tabs-2">
				   <!--tab content-->

			</div>

			<div id="tabs-3">
				    <!--tab content-->
			</div>

		</div><!--End tabs container-->

</div><!--rooteto tab bitti-->

jQuery Fonskyionumuzu alttaki kod ile çalıştırıyoruz ve tab’ımız bundan sonra aktif hale geliyor.

$(document).ready(function ($) {

    $('#tabs').tabulous({);

});

jQuery tab menüler çok gördüm ancak en güzeli bu adamınki diyebilirim. Adamın sitesi 🙂 : tabulous.js

Most Popular Topics

Editor Picks