jQuery Slider Yapımı

jQuery Slider Yapımı : Web sitesi yapımında genelde ana sayfa içinde menünün altında bulunan ve kendiliğinden akan fotoğrafların bulunduğu kayar fotoğraf alanıdır. Bu alanın kullanımı Web sitesine profesyonel bir hava katmaktadır. Tanıtım yaptığınız bir ürün veya bir başka görsel Web sitesini açan kullanıcıya doğrudan galeri şeklinde gösterebilirsiniz. Ana sayfa Slider görselleri kullanmanız gerek arama motorları gerekse kullanıcılar için olumlu bir gelişme olacaktır.

Slider kullanımı Web sitenize şık bir görüntü oluşturacağından kesinlikle görsel gerektiren sayfalarda kullanılmasını önermekteyim. Bunun yanı sıra ana sayfanın vazgeçilmezi olan Sliderlar neredeyse her Web sitesinde ana yapılan işleri göstermek için kullanılır.

Slider kullanımı ana sayfa dışında bir çok yerde kullanılabilir. Kullanım alanlarını sizlerle aşağıda maddeler halinde paylaşacağım;

Not: Web sitemizin gelişmesine katkıda bulunmak için bu yazıyla alakalı görüşlerinizi iyi veya kötü dile getirirseniz çok seviniriz. (Ayrıca sitemizin yayında kalmasına katkıda bulunmak için de sponsorlu bağlantılara da göz atabilirsiniz.)

  • Ana sayfa genel ürünlerinizi veya tanıtım yaptığınız her hangi bir görseli paylaşma.
  • Ürünler sayfanızda ürünün birden fazla fotoğrafını Slider şekliyle paylaşma.
  • Kullanım şekline bağlı olarak çoklu fotoğrafların olduğu yerlerde slider kullanımı.
jQuery Slider Örnekleri
jQuery Slider Örnekleri

jQuery Slider Nasıl Yapılır?

jQuery slider yapımı çok zor olmayan bizlere kolaylık olsun diye çıkartılmış destekleyici kodlar yardımıyla gelişmiş responsive sliderlar yapılabilir bu yazımda da sizlere slider yapımını teker teker aşama aşama göstermeye çalışacağım. Slider kodlarınızın jQuery ve Css bağlantılarını sliderları kullanacağınız sayda içinde mutlaka tanımlayınız.

HTML içinde jQuery bağlantıları ve Css bağlantıları yapacağız bunları da aşağıda sizlerle paylaşıyorum.

HTML Bölümü:

<div class="owl-carousel owl-theme">
	<div class="item">
	  <img src="https://dummyimage.com/960x350/174152/fff.jpg" />
	</div>
	<div class="item">
	  <img src="https://dummyimage.com/960x350/174152/fff.jpg" />
	</div>
	<div class="item">
	  <img src="https://dummyimage.com/960x350/174152/fff.jpg" />
	</div>
	<div class="item">
	  <img src="https://dummyimage.com/960x350/174152/fff.jpg" />
	</div>
	<div class="item">
	  <img src="https://dummyimage.com/960x350/174152/fff.jpg" />
	</div>
</div>

Html bölümünde item sınıfları içinde fotoğraflar yerleştirerek slider HTML bölümünü hazırladım. item divleri içinde fotoğraf dışında da içerik kullanabilirsiniz.

jQuery Bölümü:

<script>
	$(document).ready(function() {
	  var owl = $('.owl-carousel');
	  owl.owlCarousel({
		margin: 10,
		nav: true,
		loop: true,
		responsive: {
		  0: {
			items: 1
		  },
		  600: {
			items: 1
		  },
		  1000: {
			items: 1
		  }
		}
	  })
	})
</script>

Açıklama: Slider’ın çalışması için gerekli jQuery kodu yukarıdaki gibidir. Slider özelliklerini yukarıdaki bölümden düzenleyebilirsiniz. Bu özellikler şöyledir;

  • margin : Çevre genişliği vermek için kullanılır.
  • nav : Kaç tane fotoğrafın olduğunu gösterir.
  • loop : Kendi kendine ilerleme özelliği.
  • responsive : Genişlik piksel saysına göre kaç tane fotoğraf gösterilsin özelliği.

css Bölümü:

Bu bölüm için kullanılan kodlar slider bölümünün stil özelliklerini belirlemek için kullanılmaktadır. Slider stil özelliklerini burada belirleyebilir istediğiniz değişiklikleri dilediğiniz gibi yapabilirsiniz.

CSS ve JS Bağlantıları

Aşağıda paylaşacağım kodları head kapanış kodunun hemen altına yapıştırmalısınız. Aşağıdaki paylaştığım dosyaların yollarını da ona göre vermeniz gerekir.

    <!-- Stylesheets -->
    <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
	
    <link rel="stylesheet" href="assets/docs.theme.min.css">

    <!-- Owl Stylesheets -->
    <link rel="stylesheet" href="assets/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/owl.theme.default.min.css">

    <!-- javascript -->
    <script src="js/jquery.min.js"></script>
    <script src="js/owl.carousel.js"></script>

jQuery Slider İndir

jQuery slider kodlarını sizlerle paylaştım kodları indirip istediğiniz gibi kendi projenize uyarlayıp kullanabilirsiniz. Slider kodlarını indirmek için de owl slider sitesine göz atabilirsiniz.

jQuery Slider Yapımı