Swiper.js ile responsive slider yapımı

Swiper.js, web sitenize kullanıcı dostu bir kaydırıcı eklemek için ideal bir araçtır. Responsive tasarım özellikleri sayesinde, slider’ınızın herhangi bir cihazdan mükemmel görünüm sağlamasını sağlar. Bu araç, tamamen özelleştirilebilir ve animasyon özellikleriyle görsel olarak çekici bir slider oluşturmanıza olanak tanır. Swiper.js Slider, SEO dostu bir yapıya sahiptir ve web sayfanızın sıralama pozisyonlarını yükseltmenize yardımcı olacak bir dizi avantaj sunar. Bu nedenle, web sitenizi daha interaktif ve başarılı hale getirmek için Swiper.js Slider’ın güçlü özelliklerini kullanarak responsive bir slider oluşturabilirsiniz.

Swiper.js İle Responsive Slider Yapımı

Swiper.js, front-end dünyasında en çok tercih edilen slider frameworklerinden biri olarak ön plana çıkıyor. Bu framework, sitedeki pek çok öğeyi kaydırabilme özelliğine sahip ve görsel ya da kart geçişleri için sıkça tercih ediliyor. Swiper.js, özelleştirmeye de son derece müsait bir yapıda olduğu için kendinize özel bir slider oluşturmak oldukça kolay hale geliyor. Ayrıca, responsive sonuçlar elde etmek de Swiper.js ile çok kolay.

Swiper.js İle Responsive Slider Yapmak

Swiper.js ile responsive bir slider yapmak oldukça kolay. Basit bir uygulama ile çoklu sliderların nasıl responsive hale geldiğini öğrenelim:

1. Öncelikle, swiper.js sitesinde bulunan çoklu slider demolarından birini seçin. Örneğin; “slides per view” olanı kullanabilirsiniz.
2. Örnek içerisindeki slider demo kodları, responsive olarak çalışmamaktadır. Bu nedenle, masaüstü sürümde sorunsuz görünse de mobil sürümde kabul can sıkacak şekilde esnekliğini kaybetmiştir. İşte, burada fazladan bir müdahale gerekmektedir.
3. Bir slider için 9 slide olacak şekilde projenizi oluşturun ve breakpoints ayarlarını kullanın. Böylece, XS, SM ve MD ekranlarda ve full genişlikteki ekranlarda sürekli 3 tane görünen slider objeleri ekran genişliğine göre artacak ya da azalacaktır.

Yukarıdaki adımları uygulayarak projenize ekleyeceğiniz kodlar aşağıdaki gibidir:

breakpoints: { // büyük eşit >= 320px
 320: {
 slidesPerView: 1,
 spaceBetween: 10
 }, // büyük eşit >= 768px
 768: {
 slidesPerView:2,
 spaceBetween:10
 }, // büyük eşit >= 992px
 992: {
 slidesPerView:3,
 spaceBetween:10
 }, // büyük eşit >= 1200px
 1200: {
 slidesPerView:4,
 spaceBetween:10
 }, // büyük eşit >= 1400px
 1400: {
 slidesPerView:5,
 spaceBetween:10
 },
}

Ayrıca, projenize dahil etmeniz gereken Swiper.js kodları aşağıdaki gibidir:

var swiper = new Swiper(".mySwiper", {
 slidesPerView: 3,
 spaceBetween: 30,
 pagination: {
 el: ".swiper-pagination",
 clickable: true,
 },
 breakpoints: {
 // ve daha üstündeki ekranlar için >= 320px
 320: {
 slidesPerView: 1,
 spaceBetween: 10
 },
 768: {
 slidesPerView: 2,
 spaceBetween: 10
 }, // ve daha üstündeki ekranlar için >= 992px
 992: {
 slidesPerView: 3,
 spaceBetween: 10
 }, // ve daha üstündeki ekranlar için >= 200px
 1200: {
 slidesPerView: 4,
 spaceBetween: 10
 }, // ve daha üstündeki ekranlar için >= 1650px
 1400: {
 slidesPerView: 5,
 spaceBetween: 10
 }
 }
});

Tüm kodlarınızı doğru bir şekilde uyguladıktan sonra, projenizi responsivite açısından test edebilirsiniz.

Swiper.js İle Responsive Slider Yapımı Örneği

Aşağıdaki örnekte, Swiper.js ile responsivite açısından başarılı bir şekilde yapılan bir slider örneği gösterilmektedir:

Yukarıdaki resimde sol panelde üst üste 2 tane swiper.js ile yapılmış slider olduğu görülüyor. İlk slider mobil uyumlu ve tercihinize göre boyutlandırılıyor. İkinci ve altta bulunan 3 tane yan yan obje ise mobil ekranına sığmak zorunda kalmış ve görselde ne olduğu bu şekilde görülmeyeceği için bu alana müdahale edilmek isteniyor.

Ayrıca, aşağıdaki resimler de küçük ekranlarda verilen tepkiyi göstermektedir:

Swiper.js İle Responsive Slider Yapmak İçin Özet

• Swiper.js, pek çok öğenin kaydırılabildiği ve özelleştirmeye son derece müsait bir slider frameworktür.
• Responsive sonuçlar elde etmek oldukça kolaydır; sadece breakpoints’leri kullanın.
• Küçük ekranlarda verilen tepkiyi öcelikli olarak kontrol edin ve gereken müdahaleleri yapın.

Swiper.js ile responsive bir slider yapmak oldukça kolaydır. İstediğiniz boyutta, istediğiniz şekle sahip bir slider oluşturmak için yukarıdaki adımları takip edebilir ve projenize uygun kodları uygulayabilirsiniz.