كيف أغير الصورة الخلفية بعد كل 5 أو 10 ثواني في react ؟

يمكن تغيير الصورة الخلفية بشكل متكرر في React باستخدام الدالة setInterval. يمكنك محاولة هذا الكود:

import './App.css';
import React, { useState, useEffect } from 'react';
import Header from './components/header';
import images from '../src/img/images.jpg';
import images1 from '../src/img/images1.jpg';
import images2 from '../src/img/images2.jpg';
import images3 from '../src/img/images3.jpg';

const App = () => {
  const [img, setImg] = useState(images);
  const imagesArray = [images, images1, images2, images3];
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setIndex((index) => (index + 1) % imagesArray.length);
    }, 5000);

    return () => clearInterval(intervalId);
  }, []);

  useEffect(() => {
    setImg(imagesArray[index]);
  }, [index]);

  return (
    <div style={{ backgroundImage: `url(${img})` }} className="landing-page">
      <div className="overlay"></div>
      <Header />
      <div className="introduction-text">
        <h1>
          We are <span>Creative</span> agency
        </h1>
        <p>
          Welcome to you. I can help you with whatever you need regarding web development.
        </p>
      </div>
    </div>
  );
};

export default App;

في هذا الكود، تم استخدام دالة useEffect لتحديث الصورة الخلفية بعد تغيير الفهرس index في المصفوفة imagesArray. تم استخدام دالة setInterval لتغيير الفهرس بعد كل 5 ثوانٍ واستخدمنا دالة clearInterval في دالة useEffect الثانية لإزالة الدالة السابقة عندما يتم إعادة رسم العنصر.

تم تعيين الصورة الأولى كالصورة الافتراضية في الحالة useState، وبمجرد تغيير الفهرس، يتم تحديث الصورة الخلفية في دالة useEffect الأولى باستخدام الحالة img.

بالإضافة إلى الحل الذي وفره أحمد، 

يمكن أيضًا استخدام مكتبة أكثر تطورًا لتغيير الصور بشكل دوري، مثل react-slick أو react-carousel.

على سبيل المثال، باستخدام react-slick ، يمكنك تحقيق هذه الوظيفة عن طريق التالي:

1- تثبيت المكتبة باستخدام npm:

npm install react-slick

2- استيراد المكتبة والملفات التنسيق المطلوبة منها:

import React, { useState, useEffect } from 'react';
import Slider from 'react-slick';
import images from '../src/img/images.jpg';
import images1 from '../src/img/images1.jpg';
import images2 from '../src/img/images2.jpg';
import images3 from '../src/img/images3.jpg';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import './App.css';
import Header from './components/header';

3- استخدام المكون Slider:

const App = () => {
  const imagesArray = [images, images1, images2, images3];

  const settings = {
    dots: false,
    infinite: true,
    speed: 5000,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 5000,
    beforeChange: (current, next) => {
      // console.log('before change', current, next);
    },
    afterChange: (current) => {
      // console.log('after change', current);
    },
  };

  return (
    <Slider {...settings}>
      {imagesArray.map((img, index) => (
        <div key={index} style={{ backgroundImage: `url(${img})` }} className="landing-page">
          <div className="overlay"></div>
          <Header />
          <div className="introduction-text">
            <h1>
              We are <span>Creative</span> agency
            </h1>
            <p>
              Welcome to you. I can help you with whatever you need regarding web development.
            </p>
          </div>
        </div>
      ))}
    </Slider>
  );
};

export default App;

ستقوم هذه الطريقة بتغيير الصورة بشكل دوري كل 5 ثواني ، وتغيير الصورة بشكل سلس ومتموج.