Sadece CSS ile slider oluşturma motoru

Javascript olmadan saf CSS ile oluşturulmuş bir kaydırıcı. Mümkün olduğunca hafif ve hızlı olacak şekilde tasarlandı.

Bu slider çalışmak için JavaScript gerektirmez. zkreations tarafından sadece saf HTML ve CSS ile geliştirilmiştir. Tasarımı duyarlıdır ve tüm modern tarayıcılarla uyumludur.

Özellikler

• Saf ve modern CSS
• Bağımlılık yok
• Hafif (küçültülmüş ~ 1kb Brotli)
• Hızlı ve sorunsuz hareket
• Duyarlı (en boy oranını koruyan)
• CSS ve Sass değişkenleri ile özelleştirilebilir
• Kullanımı kolay
• Aynı sayfada birden fazla slider
• Açık kaynak

Kurulum

main.min.css dosyasını </head> etiketini kapatmadan önce yükleyin ve ekleyin. Barındıracak bir yeriniz yoksa jsdelivr'den bir CDN aracılığıyla ekleyebilirsiniz:

<link href='//cdn.jsdelivr.net/npm/sheet-slider@3/dist/css/main.min.css' rel='stylesheet'/>

Nasıl kullanılır

Slider, yalnızca çalışması için gerekli öğeleri içeren çok temel bir HTML yapısıyla mükemmel bir şekilde çalışabilir:

<div class="sheet">
  <input id="a1" type="radio" name="a" checked>
  <input id="a2" type="radio" name="a">
  <input id="a3" type="radio" name="a">
  <div class="sheet-content">
    <div class="sheet-item">
      <img class="sheet-image" src="image.jpg">
    </div>
    <div class="sheet-item">
      <img class="sheet-image" src="image.jpg">
    </div>
    <div class="sheet-item">
      <img class="sheet-image" src="image.jpg">
    </div>
  </div>
  <div class="sheet-arrows">
    <label for="a1"></label>
    <label for="a2"></label>
    <label for="a3"></label>
  </div>
</div>

sheet-item öğelerinin içindeki tüm içerik hareket edenler olacaktır. Bunların mutlaka resim olması gerekmez, herhangi bir HTML öğesi olabilirler.

Slider da ayrıca gezinme düğmeleri ve açıklayıcı metinler olmak üzere iki isteğe bağlı öğe vardır. Bunları dahil ederseniz, yapı şu şekilde görünecektir:

<div class="sheet">
  <input id="a1" type="radio" name="a" checked>
  <input id="a2" type="radio" name="a">
  <input id="a3" type="radio" name="a">
  <div class="sheet-content">
    <div class="sheet-item">
      <img class="sheet-image" src="image.jpg">
      <!-- description -->
      <div class="sheet-meta">
        <h4 class="sheet-title">Example title</h4>
        <p class="sheet-text">Text description</p>
      </div>
    </div>
    <div class="sheet-item">
      <img class="sheet-image" src="image.jpg">
      <!-- açıklama -->
      <div class="sheet-meta">
        <h4 class="sheet-title">Example title</h4>
        <p class="sheet-text">Text description</p>
      </div>
    </div>
    <div class="sheet-item">
      <img class="sheet-image" src="image.jpg">
      <!-- description -->
      <div class="sheet-meta">
        <h4 class="sheet-title">Example title</h4>
        <p class="sheet-text">Text description</p>
      </div>
    </div>
  </div>
  <!-- dots -->
  <div class="sheet-dots">
    <label for="a1"></label>
    <label for="a2"></label>
    <label for="a3"></label>
  </div>
  <!-- arrows -->
  <div class="sheet-arrows">
    <label for="a1"></label>
    <label for="a2"></label>
    <label for="a3"></label>
  </div>
</div>

Not: Etiketlerin for niteliği girdilerin id'si eşleşmelidir. Aynı sayfadaki birden fazla slider için, girdilerin name niteliği farklı olmalı ve etiketlerin for niteliği ait oldukları kaydırıcının girdilerinin id'si ile eşleşmelidir.

Seçenekler

Animasyon modu

İki animasyon modu arasından seçim yapabilirsiniz: fade ve vertical. Varsayılan olarak, animasyon modu horizontal. Değiştirmek isterseniz, ilgili sınıfı ana konteynere eklemeniz yeterlidir:

<div class="sheet sheet-fade">
  ...
</div>

<div class="sheet sheet-vertical">
  ...
</div>

Özelleştir

CSS dosyanızda veya :root seçicisinde değişkenler için yeni değerler tanımlayabilirsiniz. Bu değişkenler, kaydırıcı düzeninde değişiklikler yapmanıza olanak tanır:

Sass yapılandırma

Geliştiriciler için inc/_variables.scss dosyasındaki değerleri değiştirebilir ve Sass ile derleyebilirsiniz. İhtiyaçlarınıza uyacak şekilde değiştirmenizi önerdiğim seçeneklerden biri şudur:

$slider-items: 10 !default;

Css zaten son derece optimize edilmiş olsa da, kaydırıcı ne kadar çok öğeye sahip olursa, ortaya çıkan dosya o kadar ağır olacaktır. Varsayılan değer 10'dur, bu da kaydırıcının en fazla 10 öğeye sahip olabileceği anlamına gelir.

Otomatik mod

Kaydırıcının otomatik modu yoktur, ancak JavaScript ile kolayca ekleyebilirsiniz. Değerin slaytları değiştirmek için gereken milisaniye sayısı olduğunu göz önünde bulundurarak ana konteynere data-sheet-time özelliğini eklemeniz yeterlidir:

<div class="sheet" data-sheet-time="3000">
  ...
</div>

function initializeSlider(slider) {
  const time = slider.dataset.sheetTime || 3000
  const inputs = slider.querySelectorAll('input')
  let index = 0
  let intervalId

  function updateInputState() {
    inputs[index].checked = false
    index = (index + 1) % inputs.length
    inputs[index].checked = true
  }

  function startInterval() {
    index = Array.from(inputs).findIndex(input => input.checked) || 0;
    intervalId = setInterval(updateInputState, time)
  }

  const stopInterval = () => clearInterval(intervalId)

  startInterval()

  slider.addEventListener('mouseenter', stopInterval)
  slider.addEventListener('mouseleave', startInterval)
}

document.querySelectorAll('[data-sheet-time]')
  .forEach(initializeSlider)

Bu, JavaScript olmadan bir kaydırıcı olma amacını kaybedeceği için projeye dahil edilmemiştir. Ayrıca çok basit bir çözümdür, ihtiyaçlarınıza göre uyarlamanız gerekecektir. Kodun bir örneğini codepen de görebilirsiniz.

Sonuç

Bu kaydırıcıyı ilk kez 2014 yılında geliştirildi. Mevcut kodla karşılaştırırsanız, birçok şey değiştiğini göreceksiniz. Bu nedenle, bakımı ve özelleştirmeyi kolaylaştırmak için sıfırdan yeniden yazılmıştır.

Bu projeyi beğendiyseniz, sosyal ağlarınızda paylaşarak veya GitHub'da yıldız bırakarak beni destekleyebilirsiniz. Her türlü yorum veya öneriye açığız. Okuduğunuz için çok teşekkür ederim.