React Slick Custom Carousel 与图像重叠 div

Posted 2023-02-25

【中文标题】React Slick Custom Carousel 与图像重叠 div

【英文标题】：React Slick Custom Carousel with image overlap a div

【发布时间】：2021-06-27 14:03:43

【问题描述】：

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

但我不知道如何使图像像图片一样与 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] />
              </div>
            </div>
          );
        )
      </Slider>
    </div>
  )


export default ContentCarousel

这是我的 scss（使用 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问题 之前谢谢你！

【参考方案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]    />
          </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

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