HTML Referanslar Alanı Ekleme [CSS & JavaScript Kodları]

Web sitelerinde referanslar sayfası olmazsa olmazlar arasında yer alıyor. Özellikle ticari amaçlı kurulmuş sitelerin referanslarını çok ve sade olarak göstermesi oldukça önemli. Sitenize Kayan referanslar kodu ekleyerek referanslarınızı şık bir şekilde gösterebilirsiniz. Aşağıdaki objede bulunan Result sekmesine tıklayın ve canlı önizlemeyi görün.
Kayan Referans Kodu

Aşağıdaki kodlar sayesinde sitenize referans kaydıracı ekleyebilirsiniz. Referanslarınızın logolarını kaydırarak gösterebileceğiniz kodlar şu şekildedir;

//referanslarınız olan firmaların logolarını özelleştirmeyi unutmayın!
<div class="container"> // bootstrap responsive alanı
  <section class="customer-logos slider"> // kaydıraç için stil tanımlaması
// Sırası ile referans görselleri
<div class="slide"><img src="resimler/firma-1.png"></div>
    <div class="slide"><img src="resimler/firma-1.png"></div>
    <div class="slide"><img src="resimler/firma-2.png"></div>
    <div class="slide"><img src="resimler/firma-3.png"></div>
    <div class="slide"><img src="resimler/firma-4.png"></div>
    <div class="slide"><img src="resimler/firma-5.png"></div>
    <div class="slide"><img src="resimler/firma-6.png"></div>
    <div class="slide"><img src="resimler/firma-7.png"></div>
  </section>
</div>

Bu kodları sitenizde uygun bir alana ekledikten bu dosyayı indirin ve stil dosyanız olarak projenize dahil edin. (İndirdiğiniz dosyayı arşivden çıkarıp projenize dahil edin.)

/* kaydıraç */
.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

Yukarıdaki entegrasyonları sorunsuz yaptıktan sonra sıra geldi carousel.js adlı dosyayı projemize dahil etmeye. İsterseniz dosya adını değiştirebilirsiniz isterseniz bu şekilde oluşturup içerisine aşağıdaki kodları ekleyebilirsiniz;

$(document).ready(function(){
  $('.customer-logos').slick({
    slidesToShow: 6,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1000,
    arrows: false,
    dots: false,
    pauseOnHover: false,
    responsive: [{
      breakpoint: 768,
      settings: {
        slidesToShow: 4
      }
    }, {
      breakpoint: 520,
      settings: {
        slidesToShow: 3
      }
    }]
  });
});

Projemize eklediğimiz bu kodların projeye dahil edilmesi için include edilmesi gerekiyor. HTML kodlarınız arasında bulunan <head> tagları içerisine aşağıdaki kodları ekleyin </head>.

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

CSS ve JS dosyasını da manuel olarak projenize dahil ettikten sonra kayan referanslar şeridini sorunsuz olarak çalıştırabileceksiniz.

Kayan Referanslar Alanı Nasıl Eklenir? [HTML, JS ve CSS]

Yorum yapın Cevabı iptal et