اذهب إلى المحتوى
  • 0

إستعمال react slick داخل مشروع react js

محمود_سعداوي

السؤال

السلام عليكم.

أواجه مشكل في إستعمال react slick حيث لم يظهر شيء على الشاشة و لم أستطع معرفة مكان الخطأ.

الكود

import Slider from "react-slick";
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";

import React from 'react'

function Banner() {

  const bannerImgs = [
    {
      id : 1,
      src : '../../images/banner/img-1.jpg'
    },
    {
      id : 2,
      src : '../../images/banner/img-2.jpg'
    },
    {
      id : 3,
      src : '../../images/banner/img-3.jpg'
    },
    {
      id : 4,
      src : '../../images/banner/img-4.jpg'
    },
    {
      id : 5,
      src : '../../images/banner/img-5.jpg'
    },
    {
      id : 6,
      src : '../../images/banner/img-6.jpg'
    },
  ]

  const settings = {
    dots: true,
    lazyLoad: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    initialSlide: 2
  };

  return (
    <div className="banner">
      <Slider {...settings} >
      {
        bannerImgs.map(banner => (
          
            <div key={banner.id}>
              <img src={banner.src} alt="" />
            </div>
        
        ))
      }
      </Slider>
    </div>
  )
}

export default Banner

Capture1.JPG.99631ca0622fba79e5048576826ce060.JPGCapture2.JPG.b0a34c07e4a5b7d1645b543d4e5768a9.JPG

 

شكرا لكم.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

المشكلة هي انك وضعت ملف الصور في الملف src والصحيح ان يكون في الملف public،

قم بنقل ملف الصور images إلى الملف public :

1.thumb.png.3cc2df7f07eeaa8eecb654669e034134.png

ثم قم بتعديل روابط الصور إلى الشكل :

const bannerImgs = [
  {
    id: 1,
    src: "images/banner/img-1.jpg",
  },
  {
    id: 2,
    src: "images/banner/img-2.jpg",
  },
  {
    id: 3,
    src: "images/banner/img-3.jpg",
  },
  {
    id: 4,
    src: "images/banner/img-4.jpg",
  },
  {
    id: 5,
    src: "images/banner/img-5.jpg",
  },
  {
    id: 6,
    src: "images/banner/img-6.jpg",
  },
];

وبعدها يجب ان يعمل الكود.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 3 دقائق مضت قال عمر قره محمد:

هل تظهر أي رسالة خطأ في الكونسول ؟

هل يمكنك مشاركة ملفات المشروع.

لا يظهر شيء في الكونسول.

تفضل ملف الsrc

src.zip

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 7 دقائق مضت قال عمر قره محمد:

المشكلة هي انك وضعت ملف الصور في الملف src والصحيح ان يكون في الملف public،

قم بنقل ملف الصور images إلى الملف public :

1.thumb.png.3cc2df7f07eeaa8eecb654669e034134.png

ثم قم بتعديل روابط الصور إلى الشكل :

const bannerImgs = [
  {
    id: 1,
    src: "images/banner/img-1.jpg",
  },
  {
    id: 2,
    src: "images/banner/img-2.jpg",
  },
  {
    id: 3,
    src: "images/banner/img-3.jpg",
  },
  {
    id: 4,
    src: "images/banner/img-4.jpg",
  },
  {
    id: 5,
    src: "images/banner/img-5.jpg",
  },
  {
    id: 6,
    src: "images/banner/img-6.jpg",
  },
];

وبعدها يجب ان يعمل الكود.

لماذا وجب وضع الصور ي public.

هل جذا الفعل يجب أن يكون دائما.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ الآن قال محمود سعداوي:

لماذا وجب وضع الصور ي public.

هل جذا الفعل يجب أن يكون دائما.

هنالك طريقتين معروفتين لاستيراد الصور في رياكت،

الأولى هي وضع الصور في ملف الـ src ومن ثم استيراد الصور داخل الصفحات واستخدامها مثل :

import React from 'react';
import logo from './logo.png'; // استيراد الصورة هنا

function Header() {
  // استخدام الصورة هنا
  return <img src={logo} alt="Logo" />;
}

export default Header;

والطريقة الثانية هي التي شرحتها لك في التعليق السابق.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...