React Slick 自定义旋转木马与图像重叠 div

Question

我正在尝试制作这样的旋转木马。

但是我不知道如何让图像像图片一样重叠在div的顶部。我也不知道如何将按钮放在带有文本的 div 中。这是我已经做的

这是我的代码 `

import { useState } from "react";
import Slider from "react-slick";
import "./contentcarousel.scss"
import img1 from "./img/feature-checkin.png"
import img2 from "./img/feature-scanqr.png"
const ContentCarousel = (props) => {
  const [slides, setSlides] = useState([1, 2]);
  const [data, setData] = useState([
    ["Step 1","On your Home tab, Check In as you click on the coin available that day.",img1],
    ["Step 2","Your Check In is Successful! Come back tomorrow for more reward points.",img2]
  ])
  const [button, setButton] = useState("left")

  const create = () => {
    setSlides([1, 2])
    setData([
      ["Step 1","On your Home tab, Check In as you click on the coin available that day.",img1],
      ["Step 2","Your Check In is Successful! Come back tomorrow for more reward points.",img2]
    ])
    setButton("left")
  }
  const pause = () => {
    setSlides([1, 2])
    setData([
      ["Step 1","On your Reward tab, Select Mission.",img1],
      ["Step 2","Select on Weekly, Biweekly, or Monthly to see the missions and its Progress. When the mission is accomplished, you can Collect Point.",img2]
    ])
    setButton("middle")
  }
  const stop = () => {
    setSlides([1, 2])
    setData([
      ["Step 1","On your Reward tab, Select Redeem Point.",img1],
      ["Step 2","Claim the vouchers that you want.",img2]
    ])
    setButton("right")
  }
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    customPaging: (i) => (
      <div
        style={{
          left: "10px",
          width: "10px",
          height: "10px",
          borderRadius: "20px",
          backgroundColor: "#c4c4c4"
        }}
      ></div>
    ),
  };
  return (
    <div className="content-carousel p-5">
      <div className="mb-4">
        {button === "left" ?  
          <button className="px-3 py-1 btn-carousel-left btn-carousel-active" onClick={create}>
            Create
          </button>:
            <button className="px-3 py-1 btn-carousel-left " onClick={create}>
            Create
          </button>
        }
        {button === "middle" ?  
          <button className="px-3 py-1 btn-carousel-middle btn-carousel-active" onClick={pause}>
            Pause
          </button> :
          <button className="px-3 py-1 btn-carousel-middle" onClick={pause}>
            Pause
          </button>
        }
        {button === "right" ?  
          <button className="px-3 py-1 btn-carousel-right btn-carousel-active" onClick={stop}>
            Stop
          </button> :
          <button className="px-3 py-1 btn-carousel-right" onClick={stop}>
            Stop
          </button>
        }
      </div>

      <Slider {...settings}>
        {slides.map(function(slide) {
          return (
            <div className="content-carousel-card p-5" key={slide}>
              <div className="text-box p-5">
                  <h3 style={{fontSize:"20px"}}>{data[slide-1][0]}</h3>
                  <h3 style={{fontSize:"20px"}} className="b-700">{data[slide-1][1]}</h3>
              </div>
              <div className="img-box">
                <img src={data[slide-1][2]} alt=""/>
              </div>
            </div>
          );
        })}
      </Slider>
    </div>
  )
}

export default ContentCarousel

这是我的 css（使用 sass）

    @import '../../../../asset/css/variables';
    .content-carousel{
        // carousel content css
        .btn-carousel-left{
            background-color: #E9F2F6;
            color:$primaryColor;
            border: none;
            border-radius: 5px 0px 0px 5px;
        }
        .btn-carousel-right{
            background-color: #E9F2F6;
            color:$primaryColor;
            border: none;
            border-radius: 0px 5px 5px 0px;
        }
        .btn-carousel-middle{
            border-left: 1px solid $primaryColor;
            border-right: 1px solid $primaryColor;
            background-color: #E9F2F6;
            color:$primaryColor;
            border: none;
            border-left: 1px solid $primaryColor;
            border-right: 1px solid $primaryColor;
        }
        .btn-carousel-active{
            color:white;
            background-color: $primaryColor;
        }
        
    .content-carousel-card{
        position:relative;
        
        .text-box{
            border: 1px solid rgba(0, 0, 0, 0.05);
            box-sizing: border-box;
            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 4px 4px rgba(0, 0, 0, 0.25);
            border-radius: 50px;
        }
    
        .img-box {
            position: absolute;
            top: 0;
            right: 0;
          }
        
    // ---------------slick dots-----------
        .slick-dots {
            display: flex !important;
            justify-content: center;
        }
        
        li.slick-active div {
            background-color: #F4C14F !important;
        }
}
}

希望大家能帮我解决css的问题先谢谢你了！

Answer 1

我主要使用CSS Flexbox实现了你的设计。

<Slider {...settings}>
  {slides.map(function (slide) {
    return (
      <div className="content-carousel-card p-5" key={slide}>
        {/* Add this wrapper to handle the style of the item */}
        <div className="card-content-wrapper">
          <div className="text-box p-5">
            <h3 style={{ fontSize: "20px" }}>{data[slide - 1][0]}</h3>
            <h3 style={{ fontSize: "20px" }} className="b-700">
              {data[slide - 1][1]}
            </h3>
          </div>
          <div className="img-box">
            <img src={data[slide - 1][2]} alt="" width="200" height="300" />
          </div>
        </div>
      </div>
    );
  })}
</Slider>;

.content-carousel {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;

  .slick-controls {
    position: absolute;
    z-index: 1;
    top: 53px;
    left: 60px;
  }

  .content-carousel-card {
    .card-content-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      z-index: 1;
      padding: 0 60px;

      &:before {
        content: '';
        display: block;
        position: absolute;
        z-index: 1;
        width: calc(100% - 2px);
        height: calc(100% - 50px);
        top: 50%;
        transform: translateY(-50%);
        border: 1px solid #000;
        left: 0px;
        border-radius: 50px;
      }

      .text-box {
        padding-right: 50px;
      }
    }
  }
}

注意 - 请谨慎对待您的内容。在部署到生产环境之前，请始终使用最坏情况检查此布局。

https://codesandbox.io/s/elated-raman-lvq34?file=/src/contentcarousel.scss

如果您需要进一步的支持，请告诉我。

React Slick 自定义旋转木马与图像重叠 div

React Slick Custom Carousel with image overlap a div

html

javascript

css

reactjs

react-slick