e
sv

React'te sürüklenebilir bir kaydırıcı oluşturma

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Web sitesi kaydırıcıları, ana sayfanızda değerli alanı boşa harcamadan birden fazla görüntüyü paylaşmak veya bilgileri verimli bir şekilde iletmek için yardımcı olabilecek esnek kullanıcı arabirimi öğeleridir.

Bu makalede, React'te sürüklenebilir işlevselliğe sahip bir kaydırıcı oluşturmak için react-draggable-slider paketinin nasıl kullanılacağını göstereceğiz.

İleri atla:

kaydırıcı nedir?

Web sitesi kaydırıcısı, tek bir alanda yatay veya dikey olarak düzenlenmiş bir dizi resim veya öğeyi görüntüleyen bir slayt gösterisidir. Görüntüler, bir görüntü veya öğeden diğerine geçiş arasındaki geçiş efektiyle, tanımlanmış bir süre boyunca ayrı ayrı görüntülenir.

Bir kullanıcı, bir dizi gezinme denetimini kullanarak kaydırıcı görüntüler arasında gezinebilir ve görüntüler veya öğeler arasında döngü de yapılabilir. Kaydırıcı, bir web sitesinin tek tek öğeleri görsel olarak çekici bir şekilde sergilemesine yardımcı olurken aynı zamanda ekran alanından tasarruf sağlar.

Müşteri referanslarını gösteren web sitesi kaydırıcıları, yeni potansiyel müşterilerle güven ve güvenilirlik oluşturmak için avantajlı olabilir. Kaydırıcılar ayrıca farklı hizmet tekliflerini görüntülemek veya bir ürünün birden fazla görüntüsünü göstermek için kullanılabilir, böylece potansiyel bir müşteri onu farklı açılardan görselleştirebilir.

Bu tür UI öğesi, uzun bir kaydırma içeriği sayfası için çekici bir seçenektir. Kaydırıcı ile bilgileri tek bir yerde gruplayabilir, her öğe arasında geçiş yapmak için rahat bir tempo ayarlayabilir ve hatta bir otomatik oynatma özelliği ekleyebilirsiniz.

Sürüklenebilir kaydırıcı nedir?

Sürüklenebilir kaydırıcılar manuel olarak yönlendirilir; kullanıcı, o anda görünümde olan öğeyi tutup sola veya sağa sürükleyerek bir öğeden diğerine gider. Bir sonraki öğeyi görüntülemek için, kullanıcı mevcut öğeyi tutar ve sola doğru sürükler. Aynı şekilde, bir önceki öğeyi görüntülemek için, kullanıcı mevcut öğeyi tutar ve sağa doğru sürükler.

Tepki-sürüklenebilir-kaydırıcı nedir?

React'te sürüklenebilir bir kaydırıcı oluşturmak için onu sıfırdan oluşturabilir veya bir React paketi kullanabiliriz.

Bir React paketi kullanmak, kod yazmak için harcadığınız zamanı azaltacağından üretkenliğinizi artırabilir. Ancak bu, kod tabanınızın pakete bağımlı (ve belki de savunmasız) olacağı anlamına gelir. Bu nedenle, kendisine katkıda bulunan, hataları bulan, bildiren ve düzelten ve böylece kodu güvenli tutan geniş bir topluluğa sahip bir açık kaynak paketi seçmek tercih edilir.

Bu makale için, tepki-sürüklenebilir-kaydırıcı paketini kullanacağız. Bu paketin kullanımı kolaydır ve yerleşik bir vurgulu efekti ile birlikte gelir.

Tepki sürüklenebilir kaydırıcı demosu

React'te sürüklenebilir bir kaydırıcı oluşturmayı göstermek için, bir React uygulaması kuracağız, tepki-sürüklenebilir kaydırıcı paketini yükleyeceğiz ve ardından kaydırıcıyı oluşturup kaydırıcı ayarlarını tanımlayacağız.

Başlayalım!

React uygulamasını oluşturma

Bir React uygulaması oluşturmak için aşağıdaki komutu kullanın ve buna react-draggable-slider adını verin:

 npx oluştur-tepki-uygulama tepki-sürüklenebilir-kaydırıcı

Şimdi uygulamayı seçtiğiniz kod düzenleyicide açın. Bu demoda VS Code kullanacağım.

Tepki-sürüklenebilir-kaydırıcı paketini yükleme

Yazma sırasında, tepki-sürüklenebilir-kaydırıcı paketi, React uygulamasını oluşturduğumuzda alacağımız React sürümü olan React v18 ile uyumlu değil.

Bu nedenle, kaydırıcı paketini şu anda komutu kullanarak yüklemeye çalışırsak: npm i react-draggable-slider , kurulmayacak ve aşağıda gösterildiği gibi terminalimizde bir bağımlılık çakışması hatası alacağız:

Bağımlılık Çakışması Hatası

Geçici bir çözüm olarak, tepki-sürüklenebilir-kaydırıcı paketiyle uyumlu olması için React uygulamamızdaki react paketinin ve react-dom paketinin sürümlerini v16'ya düşürmemiz gerekecek.

Uygulamayı oluştururken istenen React sürümünü belirtmenin bir yolu yok, bu yüzden sürümü düşürmeden önce uygulamayı oluşturmamız gerekiyordu.

İlk olarak, package.json dosyasına gidin ve react paketinin ve react-dom paketinin sürümlerini v18.1.0'dan v16.13.1'e değiştirin.

Ardından, terminalde npm install komutunu çalıştırın. Bu, node_modules klasörümüzdeki mevcut sürümleri otomatik olarak package.json dosyasında belirttiğimiz yeni sürümle değiştirecektir.

Artık kaydırıcı paketini yüklemeye hazırız:

 npm i tepki-sürüklenebilir-kaydırıcı

Şu anda terminalimizde herhangi bir hata görmemeliyiz. Uygulamayı tarayıcıda görüntülemek için aşağıdaki komutlardan birini kullanarak React uygulamasını çalıştırın:

 npm başlangıç
iplik başlangıcı

Tarayıcıda, react-dom/client React modülünün bulunamadığına dair yeni bir hata olduğunu fark edeceksiniz. Bu hata, React v16 kullandığımız için oluşuyor.

Modül Bulunamadı Hatası

Bu hatayı gidermek için, modülün dosya yolunu değiştirerek index.js dosyamızda bazı değişiklikler yapmamız gerekecek.

index.js dosyasına gidin ve ReactDom içe aktarmanın dosya yolunu şuradan değiştirin:

 ReactDOM'u 'react-dom/client'tan içe aktarın;

ile:

 ReactDOM'u 'react-dom'dan içe aktarın;

Ardından, React uygulamamızı DOM'a nasıl dönüştüreceğimizi ayarlamamız gerekiyor. Bunu yapmak için, React uygulamasını oluşturmak için kullanılan kodu şuradan değiştirin:

 const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Uygulama />
  </React.StrictMode>
);

ile:

 ReactDOM.render(
  <React.StrictMode>
    <Uygulama />
  </React.StrictMode>,
  Document.getElementById("kök")
);

Şimdi geri dönün ve uygulamayı tarayıcınızda görüntüleyin. Uygulamanın içeriğini hatasız görmelisiniz:

Hatasız Uygulama

Tamam, uygulamamızı oluşturduk; şimdi sürüklenebilir kaydırıcımızı oluşturma zamanı.

Kaydırıcıyı oluşturma

Kaydırıcıyı oluşturmak için, App.js dosyasına gidin ve gerekli olmadığı için mevcut jsx öğesini (yani Header ) silin. Bu öğeyi, react-draggable-slider öğesinden içe aktaracağımız Slider bileşeniyle değiştireceğiz. Ayrıca daha sonra oluşturacağımız Slider bileşenimize prop olarak bir sliderSettings nesnesi ileteceğiz.

 Slider'ı "tepki-sürüklenebilir-kaydırıcıdan" içe aktar;

…

<div className="Uygulama">
     <Slider sliderSettings={sliderSettings} />
</div>

Ardından, projectList adında bir nesne dizisi oluşturacağız. Bu diziyi, kaydırıcıdaki her slaytta görüntülenecek öğeleri depolamak için kullanacağız.

 const projeListesi = [
    {
      başlık: "Doğanın Hayatı",
      resim: proje1,
      tanım:
        "Praesent congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse, the timer mauris. ornare ipsum accumsan bibendum. Morbi ut ante metus."
    },
    {
      başlık: "Sulara",
      resim: proje2,
      tanım:
        "Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Tamsayı purus sit amet elit pretium viverra'da. Askıya alma id fringilla nibh, zorunlu. conubia nostra başına tork, inceptos himenaeos başına."
    },
    {
      başlık: "Yıldızlardan Daha Yüksek",
      resim: proje3,
      tanım:
        "Praesent congue nisi. Vivamus dapibus suscipit magna at imperdiet. Maecenas augue tortor, son özgeçmiş kimliği, pharetra tempor mauris. Askıya alınan gazozlar commodo erat, imperdiet olmayan nisl sceleri scelerisque at. ante metus. Proin rhoncus magna lectus, nec consequat augue ultricies eu."
    },
    {
      başlık: "Minyatür Harikalar",
      resim: proje4,
      tanım:
        "Praesent congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse, the timer mauris. ornare ipsum accumsan bibendum. Morbi ut ante metus."
    },
    {
      başlık: "Tarihin Devleri",
      resim: proje5,
      tanım:
        "Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Tamsayı purus sit amet elit pretium viverra'da. Askıya alma id fringilla nibh, zorunlu. conubia nostra başına tork, inceptos himenaeos başına."
    }
  ];

Kaydırıcı ayarlarının tanımlanması

Şimdi kaydırıcı ayarlarımızı tanımlayacağız; bunlar davranışını yapılandırmak için kaydırıcımıza iletilecektir.

Aşağıdaki özelliklere sahip sliderSettings adlı bir nesne oluşturarak başlayacağız: data , speed , easing , bgColor , showButton , buttonText , buttunHref ve buttonTarget . Bu aksesuarlar, kaydırıcımızın nasıl davranacağını ve nasıl görüntüleneceğini tanımlar.

veri

data desteği bir diziyi kabul eder. Nesne dizisi, görüntülenecek kaydırıcıdaki öğelerin veya slaytların ayrıntılarını temsil eder; bizim durumumuzda, proje projectList . Her nesne üç anahtar/değer çiftini kabul eder: title , image ve description . Varsayılan olarak, data prop boş bir diziye ayarlanmıştır, [].

hız

speed desteği bir tamsayı kabul eder. Kaydırıcının sonraki veya önceki öğeye sürüklendiğinde ilerlemesi gereken hızı (milisaniye cinsinden) belirler. Örnek olarak, 3000 speed değeri 3 saniyeye eşittir. Varsayılan speed prop değeri 500ms'dir.

gevşeme

Hareket easing desteği bir dize kabul eder. Kaydırmayı canlandırmak için kullanılan dört kullanılabilir GSAP yumuşatma vardır: power, back, elastik ve expo. Her birini deneyin ve ardından en beğendiğinizi seçin. Herhangi bir değer belirtilmezse, hareket easing prop değeri varsayılan olarak tarayıcının varsayılan değeri olan ease olacaktır.

bgColor

bgColor prop bir dize kabul eder. Tüm kaydırıcının arka plan rengini ayarlar ve HEX ve RGB(A) değerlerini kabul eder. Örneğin, #ffffff veya rgba(255, 255, 255, 0.05) . bgColor prop'un varsayılan değeri rgba(255, 255, 255, 0.05) .

showButton

showButton pervanesi bir Boole kabul eder. true olarak ayarlanırsa, her öğe veya slayt için bir düğme gösterilir; ancak, showButton prop false olarak ayarlanmışsa hiçbir düğme gösterilmez. Varsayılan olarak, showButton prop değeri true olarak ayarlanmıştır.

düğmeMetin

buttonText prop bir dize kabul eder. Her öğe için düğmenin içinde görüntülenecek metni temsil eder. Varsayılan olarak değer, View case study olarak ayarlanmıştır.

düğmeHref

buttonHref prop bir dize kabul eder. Bu dize, kaydırıcıdaki her öğenin başka bir sayfaya bağlanmasına ve kullanıcının öğeyle ilgili ek ayrıntıları görüntülemesine olanak tanıyan bir href niteliğidir. Varsayılan olarak buttonHref prop değeri # olarak ayarlanmıştır.

düğmeHedef

buttonTarget prop bir dize kabul eder. Kullanıcı bir düğmeye tıkladığında, bu özellik bağlantının geçerli sayfada mı yoksa farklı bir sayfada mı açılması gerektiğini belirtir. Değer _self veya _blank olabilir. Varsayılan olarak buttonTarget prop değeri _blank olarak ayarlanmıştır.

Kaydırıcımızın nasıl görüneceğini görmek için yalnızca data desteğini geçerek başlayalım.

 const kaydırıcıAyarlar = {
    veri: projeListesi,
  }; 

Kaydırıcımızı tarayıcıda görüntülersek, daha önce açıklandığı gibi varsayılan tepki-sürüklenebilir-kaydırıcı özelliklerine sahip olduğunu görebiliriz. Şimdi, tercih ettiğimiz değerlerle kalan sahne parçalarımıza geçelim. easing desteği için bir değer belirtmediğimiz için, varsayılan olarak ease olacaktır.

 const kaydırıcıAyarlar = {
    veri: projeListesi,
    hız: 3000,
    bgColor: "#070707",
    showButton: doğru,
    buttonText: "Projeleri görüntüle",
    buttonHref: "https://www.example.com",
    buttonTarget: "_self"
  };

Ayrıca, gövdemiz ve aynı zamanda harekete geçirme butonumuz olan bağlantı etiketimiz için style.css dosyamıza bazı stiller yazacağız ve ardından dosyayı styles.css dosyamıza App.js .

 gövde {
  yazı tipi ailesi: sans-serif;
  metin hizalama: merkez;
  arka plan rengi: #070707;
  renk: #fff;
}
bir bağlantı,
bir: fareyle üzerine gelin,
bir: aktif,
a:ziyaret edilen {
  renk: #eee;
  üst kenarlık: 1 piksel katı #434141;
  kenarlık-alt: 3 piksel katı #434141;
  sınır yarıçapı: 20 piksel;
}

Bu noktada App.js dosyamız şöyle görünmelidir:

 React'i "tepki" den içe aktar;
Slider'ı "tepki-sürüklenebilir-kaydırıcıdan" içe aktar;
"./styles.css" içe aktar;
proje1'i "./imgs/bibi-pace-Hi4fWKU2KSk-unsplash.jpg" dosyasından içe aktarın;
proje2'yi "./imgs/scott-webb-e3dY8laAQtA-unsplash.jpg" dosyasından içe aktarın;
proje3'ü "./imgs/alexander-andrews-fsH1KjbdjE8-unsplash.jpg" dosyasından içe aktarın;
proje4'ü "./imgs/daan-mooij-RyxShs7mG8E-unsplash.jpg" dosyasından içe aktarın;
proje5'i "./imgs/damien-santos-M5rim8Yh4LY-unsplash.jpg" dosyasından içe aktarın;

varsayılan işlevi dışa aktar App() {
  const projeListesi = [
    {
      başlık: "Doğanın Hayatı",
      resim: proje1,
      tanım:
        "Praesent congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse, the timer mauris. ornare ipsum accumsan bibendum. Morbi ut ante metus."
    },
    {
      başlık: "Sulara",
      resim: proje2,
      tanım:
        "Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Tamsayı purus sit amet elit pretium viverra'da. Askıya alma id fringilla nibh, zorunlu. conubia nostra başına tork, inceptos himenaeos başına."
    },
    {
      başlık: "Yıldızlardan Daha Yüksek",
      resim: proje3,
      tanım:
        "Praesent congue nisi. Vivamus dapibus suscipit magna at imperdiet. Maecenas augue tortor, son özgeçmiş kimliği, pharetra tempor mauris. Askıya alınan gazozlar commodo erat, imperdiet olmayan nisl sceleri scelerisque at. ante metus. Proin rhoncus magna lectus, nec consequat augue ultricies eu."
    },
    {
      başlık: "Minyatür Harikalar",
      resim: proje4,
      tanım:
        "Praesent congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse, the timer mauris. ornare ipsum accumsan bibendum. Morbi ut ante metus."
    },
    {
      başlık: "Tarihin Devleri",
      resim: proje5,
      tanım:
        "Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Tamsayı purus sit amet elit pretium viverra'da. Askıya alma id fringilla nibh, zorunlu. conubia nostra başına tork, inceptos himenaeos başına."
    }
  ];

  const kaydırıcıAyarlar = {
    veri: projeListesi,
    hız: 3000,
    yumuşatma: "kolaylık",
    bgColor: "#070707",
    showButton: doğru,
    buttonText: "Projeleri görüntüle",
    buttonHref: "https://www.example.com",
    buttonTarget: "_self"
  };

  dönüş (
    <div className="Uygulama">
      <Slider sliderSettings={sliderSettings} />
    </div>
  );
}

İşte yeni CSS stilleriyle kaydırıcı:

Sayfanın ve kaydırıcının arka plan renginin yanı sıra metin rengini de değiştirdiğimizi fark edeceksiniz. Ayrıca butonun stilini ve metin değerini değiştirdik. Kaydırmayı canlandırmak için power easings kullanırsak, kayan animasyon şöyle görünür:

Diğer hareket easing desteği seçeneklerini kendi başınıza deneyebilir ve en beğendiğinizi seçebilir ve ayrıca diğer donanım değerleriyle denemeler yapabilirsiniz.

İmleç üzerlerine getirildiğinde, görüntü kartlarının güzel bir vurgulu etkisi olduğunu fark edeceksiniz. Bu, tepkiyle sürüklenebilir kaydırıcının harika, yerleşik bir özelliğidir.

Çözüm

Bu öğreticide, React-draggable-slider paketini kullanarak React'te sürüklenebilir bir kaydırıcı oluşturmanın ne kadar kolay olduğunu gösterdik. React'in en son sürümüyle bir uyumluluk sorununun nasıl telafi edileceğini gösterdik. Ayrıca, kaydırıcımızın stilini ve animasyonunu özelleştirmek için varsayılan tepki-sürükle-kaydırıcı ayarlarının nasıl değiştirileceğini gösterdik.

Buradaki kodu görüntülemek ve oynamaktan çekinmeyin. Ayrıca çok havalı bir paket olan başka bir React kaydırıcı aracı olan Swiper'a da göz atmak isteyebilirsiniz.

React'te sürüklenebilir bir kaydırıcı oluşturma yazısı ilk olarak LogRocket Blog'da göründü.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

React'te sürüklenebilir bir kaydırıcı oluşturma