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

Responsive web tasarımına uygun.
Mümkün olduğunca CSS3 kullanılmış.
Kaydırmayı manuel veya otomatik yapabilirsiniz.
Sonsuz döngü.
Autoplay, noktalar, oklar,ileri ve geri aramalar, vb... özellikler var.

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>

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


$(document).ready(function(){

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

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
  });
});

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
   });
});

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')
})

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
        }
    }
})

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>

Dosyaları indirmek için:

SMAK 08/03/2020

Mükemmel moduler bir slider olmuş. üzerinde değişiklikler yapılıp kullanılabilir rahatça. Ellerinize sağlık.

sabit 28/05/2020

Üstad merhaba, öncelikle teşekkür ederim. Bu slider'ı bir web sayfasının farklı bölümlerinde nasıl kullanabilirim? Mesela verdiğiniz örnekle web sayfasında bir referanslar kısmı oluşturdum oraya 4 tane attım ve çalışıyor, sayfanın başka bir yerine de js kodunu koplayarak "item" sayısını değiştirerek fotoğraf eklediğimde ilk yaptığım carousel slider'daki fotoğraflar da etkileniyor. Bunu nasıl yapabilirim?

yönetici 31/05/2020

Slider'ı istediğin yerde kullanabilirsin misal footer alanda kullanmak için footer div içine kodları kopyalarsın. Sitede iki tane kullanırsan "owl.carousel" css sonundaki " L " harfini silerek bir daha oluştur ve sayfana ekle ve içindeki clası ".owl-carousel" kolay olması için sonundaki " L " harflerini teker teker sil html ve js kodundada o şekide düzelt.

Emir 22/03/2021

Merhaba, eklediğiniz parametrik özelliklerle birlikte çok kullanışlı bir carousel slider example çalışması olmuş. elinize emeğinize sağlık.

ali kankal 01/05/2024

merhabalar benim wprdpress altyapısı olan bir sitem var anlamıyorum yazılımsal işleren hazır şablon kullanarak yaptığım bir site burada bu logo slider ı kullanmak istiyorum fakat yazılanları nasıl bir araya getirip kısa kod olarak sayfanın alt kısmında bir yere koycam tam bilgim yok yardımcı olursanız sevinirim kısaca yazılması gerektiği gibi yazılıp bana atma imkanınız olur mu ben sadece resimlerimin linkini atıp kısa koda yapıştırsam sitemde çalışsa saygılar

yönetici 03/05/2024

Ali, biraz html bilgin olması lazım download kısmından indirip asıl kısmını sitene uygulamalısın.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

KATEGORİ

HTML
CSS
PHP
JQUERY
PHOTOSHOP
JavaScript
Web Dünyası
Linux
MİTHRİL FRAMEWORK
Laravel
Git
React

POPÜLER MAKALE

HTML LİNK(Bağlantı)EKLEME - LİNK VERME
HTML YAZI VE RESİM ORTALAMA
HTML RESME LİNK VERME
HTML FORM OLUŞTURMA
CSS YATAY MENÜ YAPIMI
HTML RESİM EKLEME
CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
HTML DİV ve SPAN NEDİR?
HTML ARKAPLANA MÜZİK EKLEME
KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME

ETİKET