啥,ui叫我做一个移动端好看的轮播--异形的Slide

先看效果,得实现两边的缩放和无线滚动

实现方法

我的基础架构是 next.js+swiper

下载swiper包

yarn add swiper

下载后在页面中引用

import { useEffect, useState } from "react";
import styles from "./index.module.css";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { EffectCreative, Autoplay } from "swiper/modules";
import { getSixActivity } from "@/api/pages";
import { ActiveType } from "@/interface/pages";
import { useRouter } from "next/router";
const Active = () => {
  const [activeContent, SetActiveContent] = useState([0,0,0,0,0,0]);




  return (
    

      
热门活动
      

        
          {activeContent?.map((item, index) => (
            
              


              
            
          ))}
        
      
     
    
  );
};
export default Active;

css文件

.contain {
  width: 100%;
  height: 445px;
  background: #0e62ff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top_title {
  margin-top: 24px;
  margin-bottom: 27px;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
}

.main {
  width: calc(100% - 54px);
  height: 270px;
  overflow: hidden;
}


.content {
  /* width: 206px; */
  height: 239px;
}

.swiper {
  margin-left: 21%;
  width: 58%;
  height: 100%;
  border-radius: 4px;
  background: #ffffff;
  overflow: hidden;
}

.swiper_tag {
  margin-left: 10px;
  margin-top: 5px;
  font-size: 10px;
  color: #ffffff;
  width: 62px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 4px;
  background: linear-gradient(102deg, #277afe 10%, #0256ff 113%);
}

.swiper_tag_1 {
  margin-left: 10px;
  margin-top: 5px;
  font-size: 10px;
  color: #ffffff;
  width: 62px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 4px;
  background: #20cfff;
}

.swiper_tag_2 {
  margin-left: 10px;
  margin-top: 5px;
  font-size: 10px;
  color: #ffffff;
  width: 62px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 4px;
  background: #ff9549;
}

.swiper_title {
  width: 100%;
  height: 40px;
  padding: 0 11px;
  margin-top: 4px;
  line-height: 20px;
  font-size: 14px;
  color: #16273b;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.swiper_time {
  font-size: 10px;
  margin-top: 10px;
  margin-left: 11px;
  color: #afb6bd;
}