Question

我是新来的人，实际上，我正在尝试了解这个https://github.com/erichbehrens/react-animated-slider#readme 对于我的研究，但“ customCss”和“ style = {{背景：url('${slide.image}') no-repeat center center}}”未加载。如给定幻灯片动画所示，我需要纠正任何错误。

app.js

import React from 'react';
import Slider from 'react-animated-slider';
import 'react-animated-slider/build/horizontal.css';
import customCss from './custom.css';

import slide_1 from '../src/img/slide_1.jpg'
import slide_2 from '../src/img/slide_2.jpg'
import slide_3 from '../src/img/slide_3.jpg'


function App() {
  const slides = [
    {
      title: 'first Mollis Ultricies',
      description:
        'Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis v',
      button: 'Read More',
      image: <img src={slide_1} alt="third" />,
      user: 'Rajesh',

    },
    {
      title: 'Second item',
      description: 'Lorem ipsum',
      image: <img src={slide_2} alt="second" />
    },
    {
      title: '3 item',
      description: 'Lorem ipsum',
      image: <img src={slide_3} alt="fourth" />
    }
  ];

  return (
    <div>

      <Slider classNames={customCss} autoplay={3000} infinite="true">
        {slides.map((slide, index) =>
          <div key={index}
          className={customCss.sliderContent}
            style={{ background: `url('${slide.image}') no-repeat center center` }}
          >
            <h2>{slide.title}</h2>
            <div>{slide.description}</div>





          </div>)}
      </Slider>



    </div>
  );
}

export default App;

如果我添加了<div>{slide.image}</div>和图片加载功能，但没有在后台加载。

custom.css在app.js旁边

我的动画“反应动画滑块”滑动不起作用

0 个答案: