React Carousel ️

Di blog ini, kita akan melihat bagaimana menerapkan slider carousel sebagai reaksi. Saya membuat ulang situs web untuk perusahaan rintisan teknologi yang menyediakan produknya untuk banyak bisnis perusahaan dan dengan bangga menampilkan logo merek tersebut di situs web mereka. Saat membuat ulang situs, saya memutuskan untuk menampilkan merek pada korsel yang otomatis, tak terbatas, dan memungkinkan penggesekan manual.

Menginstal React Slick

Saya menggunakan perpustakaan, yang disebut React Slick, untuk mencapai slider carousel. Pertama-tama kita perlu menginstal perpustakaan dengan mengetikkan di bawah ini ke dalam baris perintah kita:

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";

Sekarang, kita akan menyelami dengan membangun slider kita, yang telah saya beri nama komponennya BrandSliderdan mengimpor Sliderdari react-slicksebagai berikut:

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

Memanggil Semua Gambar! ️

Untuk setiap merek, saya menemukan file png logo di Google dan membuatnya dengan ukuran dan warna yang kira-kira sama di photoshop, agar tetap dengan tema perusahaan. Saya mengimpor setiap gambar dan kemudian membuat array yang akan saya petakan di dalam komponen. Pada contoh di bawah ini, saya tidak menambahkan nama merek tetapi hanya Merek diikuti dengan angka.

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 (
  )
}

Kami sekarang akan mendeklarasikan variabel status baru, yang akan kami sebut " imageIndex " dan set ke 0. Kami kemudian akan menambahkan kode utama kami yang akan dipetakan melalui array seperti yang ditunjukkan di bawah ini:

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>
  )
}

Pengaturan dan Gaya ️ ️

Kami akan menambahkan classNameuntuk divsebagai operator ternary untuk mengekspresikan gambar mana yang 'aktif' (ditengahkan) dan gambar mana yang tidak. Kami juga akan menambahkan pengaturan untuk mengonfigurasi slider kami (ini mungkin berbeda dalam proyek Anda).

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;
}