Slick Slider Kullanımı

  • 2020-02-23 22:15:03 +0000

Selamlar, bu yazımda sizlere benimde kullanmış olduğum slick.js slider kütüphanesinin nasıl kullanıldığını göstereceğim.

Öncelikle dosyaları indireceğimiz ve örnekleri göreceğimiz slick.js sitesini ziyaret ediyoruz. Siteye Git

Slick sliderı indirdikten sonra slick klasörünü projemizin uygun yerine koyuyoruz. Html sayfamıza dahil etmemiz gereken 3 tane slick dosyası 1 jquery dosyası var. Yerleşimi ise şu şekilde olmalı;

<link rel="stylesheet" href="slick/slick.css">
<link rel="stylesheet" href="slick/slick-theme.css">
<!-- head içerisine -->


<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="slick/slick.js"></script>
<!-- body üstüne -->

Kullanımı ise çok basit;

<link rel="stylesheet" href="slick/slick.css">
<link rel="stylesheet" href="slick/slick-theme.css">

<!-- Siz div içerisinde kendi istediğiniz gibi sliderı biçimlendirebilirsiniz.-->
<div class="main_slider">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="slick/slick.js"></script>
<script>
$(document).ready(function(){
  $('.main_slider').slick({
    dots: false, //slider altında gözüken noktalar 
    arrows: true, // Sağ ve sol oklar
    infinite: true, // Döngü
    speed: 500, // Diğer slidera kaç saniye sonra geçecek
    fade: true, // Diğer slidera geçerken hoş bir animasyon katıyor
    cssEase: 'linear'
  });
});
</script>