如何为 Slider 添加 CSS

Question

在对滑块使用 react-slick npm 时，我尝试了很多次在图像上添加图像，但没有成功。我的代码如下：

代码：-

import React, { Component } from "react";
import Slider from "react-slick";
import {
  Card,
  CardBody,
} from 'reactstrap';
import image from '../images/avengers__age_of_ultron_characters-fcover.jpg'
import image1 from '../images/city-facebook-cover-18.jpg'
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";
import "../css/slider.css"

export default class Sliders extends Component {
  render() {
    const settings = {
      className: "center",
      centerMode: true,
      infinite: true,
      centerPadding: "24%",
      slidesToShow: 1,
      speed: 3000,
      width:"851px",
      infinite: true,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 3000,
    };
    return (
      <div className="slider-main-section">
        <Slider {...settings}>
          <div className="slider-inside">
          <Card style={{ borderRadius: '25px'}}>       
          <img src={image}/>
            <text className="gallery-cell-title">200</text>
          </Card>
          </div>
          <div className="slider-inside">
          <Card style={{ borderRadius: '25px'}}>
          <img src={image1}/>
          <div class="gallery-cell-title">
          <span>image2000</span>
          </div>
          </Card>
          </div>
        </Slider>
      </div>
    );
  }
}

css:-

.slider-main-section{
    padding-top: 15px;
    background-color: white;;
    padding-bottom: 10px;
}
.slider-inside{
    position:relative;
    padding-left: 12px;
    padding-right: 12px;
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

img {
    border-radius: 25px;
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.gallery-cell-title {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: black;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
}

我已经尝试了很多来实现这个结构，但我做不到，而且每次我都在图像下方获取文本。我需要的结构如下：-

This is the structure i need

提前致谢

Answer 1

知道了... 代码：-

  <div >
      <img src={image2} className="test1"/>
        <img src={image1} className="test2"></img>
         </div>

css:-

.test1{
    position: relative;
}
.test2{
    position: absolute; width:-100%; top: 0px; left: 0px;
}

如何为 Slider 添加 CSS

How to add CSS for Slider

css

reactjs

slick.js

reactstrap