React Carousel ⚛️

Bu blogda, tepki olarak bir atlıkarınca kaydırıcısının nasıl uygulanacağına bakacağız. Ürünlerini birçok kurumsal işletmeye sağlayan ve bu marka logolarını web sitelerinde gururla sergileyen bir teknoloji girişimi için yeniden bir web sitesi oluşturdum. Siteyi yeniden oluştururken, markaları otomatik, sonsuz ve manuel kaydırmaya izin veren bir atlıkarınca üzerinde görüntülemeye karar verdim.

React Slick'i Yükleme

Atlıkarınca kaydırıcısını elde etmek için React Slick adlı bir kitaplık kullandım. Öncelikle komut satırımıza aşağıdakini yazarak kütüphaneyi kurmamız gerekiyor:

npm install react-slick --save

yarn add react-slick

npm install slick-carousel --save

@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";

Şimdi, bileşeni olarak adlandırdığım BrandSliderve aşağıdaki gibi içe aktardığım Sliderkaydırıcımızı oluşturarak dalacağız react-slick:

import React, { useState } from 'react';
import Slider from 'react-slick';
import '../../styling/brandslider.css';
const BrandSlider = () => {
  return (
  )
}

Tüm Görüntüleri Aramak! ️

Her marka için Google'da logonun png dosyalarını buldum ve şirketin temasına bağlı kalabilmek için onları Photoshop'ta kabaca aynı boyut ve renkte yaptım. Her görüntüyü içe aktardım ve ardından bileşenin içinde eşleyeceğim bir dizi oluşturdum. Aşağıdaki örnekte, marka adlarını eklemedim, sadece Marka ve ardından bir sayı ekledim.

import React, { useState } from 'react';
import Slider from 'react-slick';
import brandOne from '../../assets/Brand1Logo.png';
import brandTwo from '../../assets/Brand2Logo.png';
import brandThree from '../../assets/Brand3Logo.png';
import brandFour from '../../assets/Brand4Logo.png';
import brandFive from '../../assets/Brand5Logo.png';
import brandSix from '../../assets/Brand6Logo.png';
import brandSeven from '../../assets/Brand7Logo.png';
import brandEight from '../../assets/Brand8Logo.png';
import '../../styling/brandslider.css';
const images = [brandOne, brandTwo, brandThree, brandFour, brandFive, brandSix, brandSeven, brandEight];
const BrandSlider = () => {
  return (
  )
}

Şimdi “ imageIndex” adını vereceğimiz yeni bir durum değişkeni tanımlayacağız ve onu 0'a ayarlayacağız. Ardından, aşağıda gösterildiği gibi dizi boyunca eşlenecek ana kodumuzu ekleyeceğiz:

import React, { useState } from 'react';
import Slider from 'react-slick';
import brandOne from '../../assets/Brand1Logo.png';
import brandTwo from '../../assets/Brand2Logo.png';
import brandThree from '../../assets/Brand3Logo.png';
import brandFour from '../../assets/Brand4Logo.png';
import brandFive from '../../assets/Brand5Logo.png';
import brandSix from '../../assets/Brand6Logo.png';
import brandSeven from '../../assets/Brand7Logo.png';
import brandEight from '../../assets/Brand8Logo.png';
import '../../styling/brandslider.css';
const images = [brandOne, brandTwo, brandThree, brandFour, brandFive, brandSix, brandSeven, brandEight];
const BrandSlider = () => {
  const [imageIndex, setImageIndex] = useState(0);
  return (
    <div className='slider'>
      <p>Empowering leading global brands</p>
      <Slider>
        {images.map((img) => (
          <div className='temp'>
            <img src={img} alt={img} />
          </div>
        ))}
      </Slider>
     </div>
  )
}

Ayarlar ve Şekillendirme ⚙️ ️

Hangi görüntünün 'etkin' (merkezde) olduğunu ve hangi görüntülerin olmadığını ifade etmek classNameiçin for divthe'yi üçlü bir operatör olarak ekleyeceğiz . Ayrıca kaydırıcımızı yapılandırmak için ayarlar ekleyeceğiz (bu, projenize göre değişebilir).

import React, { useState } from 'react';
import Slider from 'react-slick';
import brandOne from '../../assets/Brand1Logo.png';
import brandTwo from '../../assets/Brand2Logo.png';
import brandThree from '../../assets/Brand3Logo.png';
import brandFour from '../../assets/Brand4Logo.png';
import brandFive from '../../assets/Brand5Logo.png';
import brandSix from '../../assets/Brand6Logo.png';
import brandSeven from '../../assets/Brand7Logo.png';
import brandEight from '../../assets/Brand8Logo.png';
import '../../styling/brandslider.css';
const images = [brandOne, brandTwo, brandThree, brandFour, brandFive, brandSix, brandSeven, brandEight];
const BrandSlider = () => {
  const [imageIndex, setImageIndex] = useState(0);
  const settings = {
    infinite: true,
    lazyload: true,
    speed: 500,
    slidesToShow: 5,
    centerMode: true,
    centerPadding: 0,
    autoplay: true,
    beforeChange: (current, next) => setImageIndex(next)
  };
  return (
    <div className='slider'>
      <p>Empowering leading global brands</p>
      <Slider {...settings}>
        {images.map((img, idx) => (
          <div className={idx === imageIndex ? "slide activeSlide" : "slide"}>
            <img src={img} alt={img} />
          </div>
        ))}
      </Slider>
    </div>
  )
}

.slide {
  transform: scale(0.5);
  transition: transform 300ms;
  opacity: 0.2;
}
.activeSlide {
  transform: scale(1.5);
  transition: transform 300ms;  
  opacity: 1;
}