有版心-两边可左右滑动的轮播图

老样子先看效果

项目体验地址

Konnect IM

为啥没有使用轮播图呢？

版心左右是边界，版心外面部分是可以滑动的，同时滚动是滚动4个。所以需求没法使用swiper或react-slick这些库来实现

实现原来 通过边界结算+ 内部元素的offsetLeft 只需要维护滚动几个元素就行了

代码实现

import React, { Children } from "react";
import style from "./index.module.scss";
import Arrowhead from "../../assets/rightArr.png";
import next from "../../assets/next.png";
import last from "../../assets/last.png";
import { useState } from "react";
import { useRef } from "react";
// import FlipMove from "react-flip-move";
export default function NavigationMean(props) {
  const [translateX, setTranslateX] = useState(0);
  const [currentIndex, setCurrentIndex] = useState(0);
  const scrollRef = useRef();

  //  左移动
  function lastArrow() {
    const clientWidth = scrollRef.current.clientWidth;
    const length = scrollRef.current.children.length;
    const children = scrollRef.current.children;
    
    if (clientWidth > 1200) {
      if ((clientWidth + translateX) % 1200 > 0) {
        
        if(6 + currentIndex ==length ) {
          setTranslateX(1200 - clientWidth);
          setCurrentIndex(length-4);
          return false
        }
          if((5 + currentIndex) >= length) {
            setTranslateX(1200 - clientWidth);
            setCurrentIndex(length-4);
          }else {
            setTranslateX(-children[5 + currentIndex]?.offsetLeft);
            setCurrentIndex(5 + currentIndex);
          }
      } else {

        setTranslateX(1200 - clientWidth);
      }
    } else {
      setTranslateX(0);
      setCurrentIndex(0);
    }
  }

  //  右移动
  function nextArrow() {
    const clientWidth = scrollRef.current.clientWidth;
    const length = scrollRef.current.children.length;
    const children = scrollRef.current.children;
    if (clientWidth > 1200) {
      if(translateX>=0) {
        setTranslateX(0);
        return false
      }

      if ((clientWidth-1200 +translateX) % 1200 >= 0) {
        if(currentIndex - 5 <= 0) {
          setTranslateX(0);
          setCurrentIndex(0);
        }else {
          setTranslateX(-children[currentIndex - 5]?.offsetLeft);
          setCurrentIndex(currentIndex - 5);
        }
      } else {
        setTranslateX(1200 - clientWidth);
      }
    } else {
      setTranslateX(0);
    }
  }
  return (
    <div className={style.navigationMean}>
      <div className={style.meanBox}>
        <div className={style.leftBox}>
          <label className={style.title}>{props?.title}</label>
          <div className={style.btnArrowBox}>
            <img
              className={style.arrow}
              src={last}
              alt="left"
              onClick={nextArrow}
            />
            <img
              className={style.arrow}
              src={next}
              alt="next"
              onClick={lastArrow}
            />
          </div>
        </div>
        <div className={style.btn}>
          <span>MORE</span>
          <img src={Arrowhead} className={style.arr} alt="Arrowhead" />
        </div>
      </div>
      <div className={style.scrollCardContainter}>
        <div
          ref={scrollRef}
          className={style.scrollCardBox}
          style={{
            transform: `translateX(${translateX}px)`,
          }}
        >
          {Children.map(props?.children, (item, index) => {
            return (
              <div className={style.scrollCard} key={index}>
                {item}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

.navigationMean {
  width: 1200px;
  height: fit-content;
  background: #141414;
  .meanBox {
    display: flex;
    justify-content: space-between;
    height: 34px;
    .leftBox {
      width: 400px;
      display: flex;
      .title {
        height: 30px;
        font-size: 25px;
        font-family: Montserrat-Medium, Montserrat;
        font-weight: 500;
        color: #ffffff;
        line-height: 30px;
      }
      .btnArrowBox {
        height: 30px;
        margin-left: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .arrow {
          width: 34px;
          height: 34px;
          object-fit: contain;
          margin-right: 12px;
        }
      }
    }

    .btn {
      width: 92px;
      height: 34px;
      border-radius: 10px;
      border: 1px solid #ffffff;
      backdrop-filter: blur(50px);
      font-size: 14px;
      font-family: Montserrat-Light, Montserrat;
      font-weight: 300;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      .arr {
        width: 16px;
        height: 16px;
      }
    }
  }
  .scrollCardContainter {
    width: 100%;
    height: fit-content;
    margin-bottom: 90px;
    .scrollCardBox {
      width: fit-content;
      transition: all 0.5s;
      display: flex;
      flex-wrap: nowrap;
      margin-top: 48px;
      .scrollCard {
        margin-right: 32px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
 
}