Tek satır JavaScript ile slider yapımı

Bir slider’dan bekletimiz nedir? Belirlediğimiz bir sürede veya kullanıcıdan gelen bir komutla, sondaki item’ın en başa gelmesidir.

Canlı Demo: https://one-line-slider-js.netlify.app/

arr.unshift(arr.pop())

Yukarıdaki küçük satır tarif ettiğimiz işlemi yapıyor.

arr.unshift()

Unshift adlı reserved function parametre olarak verdiğimiz veriyi Array’in sıfırıncı indeksine push’luyor. Diğer tüm item’ların index’i +1 oluyor.

arr.pop()

Pop adlı reserved function ise Array’in son item’ını Array’dan çıkarıyor ve return ediyor.

[
 {
   id: 0,
   title: 'Title 1',
 },
 {
   id: 1,
   title: 'Title 2',
 },
 {
   id: 2,
   title: 'Title 3',
 }
]

Bu işlemi setInterval içerisinde yaparsak biz clearInterval komutu verinceye kadar callback’te verdiğimiz sürenin sıklığında Array’in son item’ı ilk item’ı ile yer değiştirecektir. İnsan bir sliderdan başka ne bekler ki.

one-line-slider-vuejs/Slider.vue at main · gayret/one-line-slider-vuejs

Canlı Demo: https://one-line-slider-js.netlify.app/
GitHub Repo: https://github.com/gayret/one-line-slider-vuejs