啥,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<ActiveType[]>([0,0,0,0,0,0]);




  return (
    <div className={styles.contain}>
      <div className={styles.top_title}>热门活动</div>
      <div className={styles.main}>
        <Swiper
          style={{ height: "239px" }}
          loop={true} //设置循环轮播
          className="mySwiper"
          spaceBetween={-200} //设置堆叠轮播，item之间叠的距离
          slidesPerView="auto" //设置显示的数量
          modules={[Autoplay, EffectCreative]}
          autoplay={true}
          grabCursor={true}
          effect={"creative"} //modules上加了同时要设置
          centeredSlides={true} // 居中的slide是否标记为active，默认是最左active,这样样式即可生效
          slideToClickedSlide={false} // 点击的slide会居中
          creativeEffect={{
            prev: {
              //这里是设置当前item的前一项的具体属性
              translate: [-200, 0, 0], //偏移量，三个轴，X、Y、Z
              scale: 0.8, //缩放量
            },
            next: {
              translate: [200, 0, 0],
              scale: 0.8,
            },
            limitProgress: 2,
          }}
        >
          {activeContent?.map((item, index) => (
            <SwiperSlide key={index} style={{ width: 360 }}>
              <div
                className={styles.swiper}
               
              >

              </div>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
     
    </div>
  );
};
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;
}

原文地址：https://blog.csdn.net/m0_66809099/article/details/135772217

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！