HTML Carousel Slider Ekle

Slider, Kayan anlamına gelmektedir. Web sitelerinde yeni gelen ürünleri, reklamları, bir kampanya duyurusunu vb. olayları site ziyaretcilerine suna bilmek ve çeşitli efektlerle bu olayı zenginleştirerek, otomatik veya manuel geçişler yapılmasını sağlayan görsel bir uygulamadır.

Slider'ları her türden web sitesinde kullanılabilir, ancak en yaygın olarak iş siteleri veya ticaret web sitelerinde kullanılırlar. Slider kullanmanın açık bir avantajı, web sitesi sahiplerinin tüm önemli içeriği, ana içeriğinden önce sayfanın üst kısmında görsel olarak güzel ve etkileşimli bir slayt gösterisine yerleştirebilmeleridir. Bu, kullanıcıların vurguları hızlı bir şekilde görmesine sebep olur.

Carousel, metin ve görsellerin bir araya getirilerek, içeriğin aynı ve kendi tekrar edebilen çerçeve içerisinde kullanıcıya sunulmasıdır.

Carousel alanlarsa web kullanıcılarına bannerlar ve alışılmış manşet sistemlerinin aksine daha okunaklı geliyor. Üstelik Carousel alanlarda yalnızca içeriğe yer verildiği için kullanıcılar bu bölgede olası reklamların yer almayacağını ve yalnızca içeriklerden oluşacağını düşünüyor.

Owl Carousel, carousel kaydırıcı oluşturmak için kullanılan, güçlü bir jQuery eklentisidir. Bu eklenti, logoları, haber sitelerinde yazar ve makale başlıklarını veya resimlerinizi kaydırmak gibi süper hızlı kayan çoklu görüntüler oluşturmanıza yardımcı olur. Bu eklentinin bazı temel özellikleri aşağıda gösterilmiştir.

Özellikleri

Kütüphaneler

Sayfada gerekli CSS + JS kütüphanelerini <head> </head> etiketleri arasına ekleyin.


<link href="css/owl.carousel.min.css" rel="stylesheet">
<link href="css/owl.theme.default.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.min.js"></script>

Tekrar <script> </script> etiketleri oluşturun sliderı çalıştıran jquery kodlarını ekleyin.


$(document).ready(function(){

$('.owl-carousel').owlCarousel({

   loop:true
  });
});

Slider’ı oluşturmak için ihtiyacınız olan tek şey, divlerinizi konteyner elemanının içine sarmaktır. <div class="owl-carousel"> "Owl-carousel" sınıfı, owl.carousel.css dosyasından gelen uygun stilleri uygulamak için zorunludur. Nokta veya ileri geri button gibi varsayılan gezinme denetimlerini istiyorsanız, aynı div'de "owl-theme" sınıfınıda dahil etmeniz gerekir. Div etiketlerinin içinde img, a, span etiketleri olabilir.


<div class="owl-carousel owl-theme">
  <div><img src="resim/11.jpg"></div>
  <div><img src="resim/22.jpg"></div>
  <div><img src="resim/33.jpg"></div>
  <div><img src="resim/44.jpg"></div>
  <div><img src="resim/55.jpg"></div>
  <div><img src="resim/66.jpg"></div>
  <div><img src="resim/11.jpg"></div>
</div>	

önizleme buton

Resim sayısını değiştirmek için items özelliği ekleyelim.


$(document).ready(function(){

  $('.owl-carousel').owlCarousel({
  loop:true,
  items:4
  });
});

önizleme buton

Resimler arasındaki boşluklar varsayı olarak 0px’dir. Bunu değiştirmek için css’te kullandığımız margin özelliğinden faydalanacağız.


$(document).ready(function(){

  $('.owl-carousel').owlCarousel({
  loop:true,
  margin:10,
  items:4
  });
});

önizleme buton

slider’da sağ ve sol yön tuşları ekleyip resimleri kaydırabiliriz . Bunu değiştirmek için nav özelliğini kullanıp değerini 'true' yapıyoruz.


$(document).ready(function(){

 $('.owl-carousel').owlCarousel({
  loop:true,
  margin:10,
  items:4,
  nav:true
   });
});


önizleme buton

Slider’ı otomatik olarak hareket ettirmek için autoPlay özelliği kullanılır. Değerini 'true' yaptığımızda slider belirli bir süreden sonra hareket edecektir. Resimlerin üstüne geldiğinizde durmasını ayrıldığınızda tekrar haraket etmesi için 2 tane event ekliyoruz.


var owl = $('.owl-carousel');
owl.owlCarousel({
    items:4,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:1000,
    autoplayHoverPause:true
});
$('.play').on('click',function(){
    owl.trigger('play.owl.autoplay',[1000])
})
$('.stop').on('click',function(){
    owl.trigger('stop.owl.autoplay')
})

önizleme buton

Slider'ı responsive özelliği verilerek cep telefonlara ve tabletlerle uyumlu çalışır.


$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
})


önizleme buton

Slider'ın boyunu kısaltmak ve ortalamak için HTML öğelerini DIV ile sarıp css özelliği olarakta width değerine 80% gibi değer verip margin:auto ortalayalım.


<div style="width:80%;margin:auto">

<div class="owl-carousel owl-theme">
   <div><img src="resim/11.jpg"></div>
   <div><img src="resim/22.jpg"></div>
   <div><img src="resim/33.jpg"></div>
   <div><img src="resim/44.jpg"></div>
   <div><img src="resim/55.jpg"></div>
   <div><img src="resim/66.jpg"></div>
   <div><img src="resim/11.jpg"></div>
 </div>

<div>		

önizleme buton

Dosyaları indirmek için:

download buton
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

7589

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.