Swiper ile React Uygulamanızda Kaydırılabilir Arayüzler Nasıl Oluşturulur

Mobil cihazlar daha popüler hale geldikçe, kaydırılabilir arayüzler, uygulamalarla etkileşimde bulunmanın standart bir yolu haline geldi. Kaydırılabilir arayüzler, mobil kullanıcılara en iyi kullanıcı deneyimini sağlamak için gereklidir.

Swiper, React uygulamalarınızda kaydırılabilir arayüzler oluşturmanıza izin veren çok yönlü bir kitaplıktır. Swiper kullanarak React uygulamanızda nasıl kaydırılabilir arayüzler oluşturabileceğinizi keşfedin.

Swiper'ı Yükleme

Swiper, React uygulamanızı özelleştirmek için kullanabileceğiniz birçok kitaplıktan biridir. Swiper'ı kullanmaya başlamak için onu React uygulamanıza yüklemeniz gerekir. Bunu, projenizin kök dizininde çalıştırmanız gereken aşağıdaki terminal komutuyla yapabilirsiniz:

npm kurulum silecek

Swiper'ı yükledikten sonra uygulamanızda kullanabilirsiniz.

Kaydırılabilir Arayüzler Oluşturma

Swiper'ı React uygulamanıza yükledikten sonra, kaydırılabilir arayüzler oluşturabilirsiniz. içe aktararak başlayın

Swiper bileşeni, Swiper kitaplığının ana bileşenidir. Kaydırılabilir öğelerin yapısını, davranışını ve işlevselliğini tanımlar. SwiperSlide bileşeni, Swiper bileşeninin bir alt bileşenidir. Swiper bileşeni içindeki tek tek slaytları tanımlar.

İşte Swiper ve SwiperSlide bileşenlerini kullanan kaydırılabilir bir arayüz örneği:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak { Swiper, SwiperSlide} itibaren"kaydırıcı/tepki";
içe aktarmak"kaydırıcı/css";
işlevUygulama() {
geri dönmek (




<divsınıf adı='öğe'>1. öğediv></SwiperSlide>
<divsınıf adı='öğe'>Öğe 2div></SwiperSlide>
<divsınıf adı='öğe'>Öğe 3div></SwiperSlide>
<divsınıf adı='öğe'>4. öğediv></SwiperSlide>
 </Swiper>
 </div>
 )
}
ihracatvarsayılan Uygulama

Buna ek olarak tokatlayıcı Ve Hızlı Kaydırma bileşenleri, bu kod bloğu Swiper için varsayılan stil sayfasını içe aktarır. kaydırıcı/css modül.

Örnek daha sonra bir Swiper bileşenini dört SwiperSlide alt bileşeninin etrafına sarar. Her SwiperSlide bir içerir div ile eleman sınıf adı bağlanmak. div öğelerine stil vermek için className'i kullanabilirsiniz:

.element {
satır içi boyut: 100piksel;
sınır yarıçapı: 12piksel;
dolgu malzemesi: 1rem;
renk: #333333;
arka plan rengi: #e2e2e2;
font ailesi: el yazısı;
}

Kaydırılabilir Arayüzünüzü Özelleştirme

Kaydırılabilir bir arabirimi başarıyla oluşturduktan sonra, görünümünü ve işlevselliğini ihtiyaçlarınıza göre geliştirebilirsiniz.

Swiper ile arayüzün davranışını ve görünümünü çeşitli seçenekleri kullanarak özelleştirebilirsiniz. Bu seçenekleri tokatlayıcı olarak bileşen React'te aksesuarlar:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak { Swiper, SwiperSlide} itibaren"kaydırıcı/tepki";
içe aktarmak"kaydırıcı/css";
işlevUygulama() {
geri dönmek (



 Aradaki boşluk={30}
 slidesPerView={2}
 döngü={ doğru }
 >
<divsınıf adı='öğe'>1. öğediv></SwiperSlide>
<divsınıf adı='öğe'>Öğe 2div></SwiperSlide>
<divsınıf adı='öğe'>Öğe 3div></SwiperSlide>
<divsınıf adı='öğe'>4. öğediv></SwiperSlide>
 </Swiper>
 </div>
 )
}
ihracatvarsayılan Uygulama

Bu örnekte, Swiper bileşeni üç destek alır: arasındaki boşluk, slidesPerView, Ve döngü. bu arasındaki boşluk prop, her slayt arasındaki boşluğu ayarlar, bu durumda 30 piksel.

Kullanmak slidesPerView prop, bir kerede görünen slayt sayısını ayarlayabilirsiniz. bu durumda, slidesPerView pervane 2'ye ayarlanmıştır ve tokatlayıcı iki slaytı aynı anda görüntülemek için bileşen.

Son olarak, döngü prop, slaytların sonsuz döngüye girip girmeyeceğini belirtir. Bu örnekte, slaytlar sonsuz döngüye girecektir çünkü döngü pervane değeri doğru.

Kaydırılabilir Arayüzlerinizi Modüllerle Yapılandırma

Kaydırılabilir arabiriminizin davranışını şununla daha fazla yapılandırabilirsiniz: JavaScript modülleri Swiper kitaplığı tarafından sağlanır. Sağladığı modüllerden bazıları şunlardır: Navigasyon, Otomatik oynatma, sayfalandırma, Ve Kaydırma çubuğu.

Uygulamanızda bu modüllerden herhangi birini kullanmak için, bunları Swiper kitaplığından almanız gerekir. Modüller için karşılık gelen CSS stillerini de içe aktarmalı ve adlarını modüle iletmelisiniz. tokatlayıcı bileşenini kullanarak modüller pervane

Örneğin, şu şekilde kullanabilirsiniz: Navigasyon kaydırılabilir arayüzlerinizi yapılandırmak için modül:

içe aktarmak Tepki itibaren"tepki";
içe aktarmak { Kaydırıcı, Kaydırıcı Kaydırıcı } itibaren"kaydırıcı/tepki";
içe aktarmak { Navigasyon } itibaren"silmek";
içe aktarmak"kaydırıcı/css";
içe aktarmak"kaydırıcı/css/navigasyon";
işlevUygulama() {
geri dönmek (



 Aradaki boşluk={30}
 slidesPerView={2}
 modüller={[Navigasyon]}
 döngü={doğru}
 navigasyon={doğru}
 >
<divsınıf adı="öğe">1. öğediv></SwiperSlide>
<divsınıf adı="öğe">Öğe 2div></SwiperSlide>
<divsınıf adı="öğe">Öğe 3div></SwiperSlide>
<divsınıf adı="öğe">4. öğediv></SwiperSlide>
 </Swiper>
 </div>
 );
}
ihracatvarsayılan Uygulama;

Bu kod bloğu, Navigasyon modül ve onun CSS stili, ardından modülü modüller pervane tokatlayıcı bileşen. bu modüller prop, Swiper kitaplığı tarafından sağlanan modülleri etkinleştirir ve yapılandırır.

Navigasyon modülü, Swiper bileşenine navigasyon işlevselliği sağlar. Önceki veya sonraki slayda geçmek için tıklayabileceğiniz veya dokunabileceğiniz önceki ve sonraki ok düğmelerini ekler.

bu navigasyon prop değeri doğrudur, bu da önceki ve sonraki düğmelerin ekranda görüntülenmesine neden olur.

Kaydırılabilir Arabirimleri Otomatik Kullan ile Yapılandırma

bu Otomatik oynatma modülü, kaydırıcının kullanıcı etkileşimi olmadan otomatik olarak slaytlar arasında geçiş yapmasına olanak tanır.

Kaydırılabilir arayüzünüzü kullanarak nasıl yapılandıracağınıza dair bir örnek: Otomatik oynatma modül:

içe aktarmak Tepki itibaren"tepki";
içe aktarmak { Kaydırıcı, Kaydırıcı Kaydırıcı } itibaren"kaydırıcı/tepki";
içe aktarmak { Otomatik oynatma } itibaren"silmek";
içe aktarmak"kaydırıcı/css";
içe aktarmak"kaydırıcı/css/otomatik oynatma";
işlevUygulama() {
geri dönmek (



 Aradaki boşluk={30}
 slidesPerView={2}
 modüller={[Otomatik oynatma]}
 döngü={doğru}
 otomatik oynatma={{ gecikme: 3000 }}
 >
<divsınıf adı="öğe">1. öğediv></SwiperSlide>
<divsınıf adı="öğe">Öğe 2div></SwiperSlide>
<divsınıf adı="öğe">Öğe 3div></SwiperSlide>
<divsınıf adı="öğe">4. öğediv></SwiperSlide>
 </Swiper>
 </div>
 );
}
ihracatvarsayılan Uygulama;

Kullanmak otomatik oynatma prop, belirtebilirsiniz gecikme; bu durumda 3000 milisaniyeye ayarlanmıştır.

Pagination ile Kaydırılabilir Arabirimleri Yapılandırma

Diğer bir önemli Swiper modülü ise sayfalandırma. bu sayfalandırma modülü, kaydırıcıya sayfalandırma madde işaretleri veya ilerleme çubuğu göstergeleri eklemenize olanak tanıyarak kullanıcılara slaytların sayısını ve kaydırıcıdaki mevcut konumlarını görsel olarak sunar.

kullanmak için sayfalandırma modülü içe aktarmanız ve modüller pervane tokatlayıcı bileşen:

içe aktarmak Tepki itibaren"tepki";
içe aktarmak { Kaydırıcı, Kaydırıcı Kaydırıcı } itibaren"kaydırıcı/tepki";
içe aktarmak { Sayfalandırma } itibaren"silmek";
içe aktarmak"kaydırıcı/css";
içe aktarmak"kaydırıcı/css/sayfalama";
işlevUygulama() {
geri dönmek (



 Aradaki boşluk={30}
 slidesPerView={2}
 modüller={[Sayfalandırma]}
 döngü={doğru}
 sayfalandırma={{ tıklanabilir: doğru }}
 >
<divsınıf adı="öğe">1. öğediv></SwiperSlide>
<divsınıf adı="öğe">Öğe 2div></SwiperSlide>
<divsınıf adı="öğe">Öğe 3div></SwiperSlide>
<divsınıf adı="öğe">4. öğediv></SwiperSlide>
 </Swiper>
 </div>
 );
}
ihracatvarsayılan Uygulama;

Bu kod bloğu, sayfalandırma işlevselliğini sağlar. sayfalandırma modül. Ayrıca, kullanıcıların sayfalandırma ayarlayarak mermi tıklanabilir mülkiyeti sayfalandırma gerçeğe destek.

Swiper kütüphanesine ek olarak sayfalandırma modül, tepki-sayfalandırma React uygulamanızda sayfalandırma oluşturmak için başka bir mükemmel seçenektir.

React ile Erişilebilir Uygulamalar Oluşturma

Kaydırılabilir arabirimler, dokunmatik ekran kullanıcıları için uygulamanızın kullanıcı deneyimini geliştirir. Swiper bol miktarda esneklik sunar ve uygulamanızın ihtiyaçlarına göre kolayca özelleştirebilirsiniz.

Çeşitli UI kitaplıkları, React uygulamalarınızı daha erişilebilir hale getirmenize yardımcı olabilir. Bu kitaplıklar, uygulamanızın kullanıcı deneyimini geliştiren özellikler ve işlevler sağlar.