React Slick Custom Carousel 与图像重叠一个 div

如何解决React Slick Custom Carousel 与图像重叠一个 div

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

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

这是我的代码 `

import SwiftUI
import Combine

struct ContentView: View {
    @State var celsius: String = ""
    @State var kelvin: String = ""
    @State var farenheit: String = ""
    @State var reyumur: String = ""
    @State var rankin: String = ""
    var body: some View {
        NavigationView {
            Temperature(celsius: $celsius,kelvin: $kelvin,farenheit: $farenheit,reyumur: $reyumur,rankin: $rankin)
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct Temperature: View {
    @Binding var celsius: String
    @Binding var kelvin: String
    @Binding var farenheit: String
    @Binding var reyumur: String
    @Binding var rankin: String
    var body: some View {
        List {
            Section(
                header: Text("Международная система (СИ)")) {
                HStack {
                    TextField("Enter value",text: $celsius)
                        .keyboardType(.numbersAndPunctuation)
                        .onReceive(Just(celsius)) { newValue in
                            let filtered = newValue.filter { "0123456789.".contains($0) }
                            if filtered != newValue {
                                self.celsius = filtered
                            }
                        }
                    Text("°C")
                        .padding(.horizontal)
                        .font(.headline)
                        .foregroundColor(.blue)
                }
                HStack {
                    TextField("Enter value",text: $kelvin)
                        .keyboardType(.numbersAndPunctuation)
                        .onReceive(Just(kelvin)) { newValue in
                            let filtered = newValue.filter { "0123456789.".contains($0) }
                            if filtered != newValue {
                                self.kelvin = filtered
                            }
                        }
                    Text("K")
                        .padding(.horizontal)
                        .font(.headline)
                        .foregroundColor(.blue)
                }
            }
            Section(
                header: Text("США и Британия")) {
                HStack {
                    TextField("Enter value",text: $farenheit)
                        .keyboardType(.numbersAndPunctuation)
                        .onReceive(Just(farenheit)) { newValue in
                            let filtered = newValue.filter { "0123456789.".contains($0) }
                            if filtered != newValue {
                                self.farenheit = filtered
                            }
                        }
                    Text("F")
                        .padding(.horizontal)
                        .font(.headline)
                        .foregroundColor(.blue)
                }
            }
            Section(
                header: Text("Редкоиспользуемые")) {
                HStack {
                    TextField("Enter value",text: $reyumur)
                        .keyboardType(.numbersAndPunctuation)
                        .onReceive(Just(reyumur)) { newValue in
                            let filtered = newValue.filter { "0123456789.".contains($0) }
                            if filtered != newValue {
                                self.reyumur = filtered
                            }
                        }
                    Text("Re")
                        .padding(.horizontal)
                        .font(.headline)
                        .foregroundColor(.blue)
                }
                HStack {
                    TextField("Enter value",text: $rankin)
                        .keyboardType(.numbersAndPunctuation)
                        .onReceive(Just(rankin)) { newValue in
                            let filtered = newValue.filter { "0123456789.".contains($0) }
                            if filtered != newValue {
                                self.rankin = filtered
                            }
                        }
                    Text("R")
                        .padding(.horizontal)
                        .font(.headline)
                        .foregroundColor(.blue)
                }
            }
        }
        .navigationBarTitle("Temperature")
        .navigationBarTitledisplayMode(.inline)
    }
}

这是我的 scss（使用 sass）

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",img2]
    ])
    setButton("left")
  }
  const pause = () => {
    setSlides([1,"On your Reward tab,Select Mission.","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,Select Redeem Point.","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问题 先谢谢了！

解决方法

我主要使用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

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