swipei实现3D横向焦点图效果

七七Cqq

已于 2022-10-28 14:09:00 修改

阅读量957

点赞数 3

分类专栏：功能代码文章标签：前端

于 2022-10-28 13:07:00 首次发布

本文链接：https://blog.csdn.net/m0_67869050/article/details/127569016

版权

本文介绍了如何利用Swiper 5.4.5版本创建一个3D横向焦点图。展示了一个包含五张图片的效果，并提供了模板、JavaScript及样式相关的实现代码。

摘要由CSDN通过智能技术生成

swiper使用

使用swiper的版本是5.4.5版本 “swiper”: “^5.4.5”,
效果图：一共5张图片，显示5张
在这里插入图片描述
template部分

      <div class="box">
        <div class="swiper" id="certify" v-if="countryitems.length > 0">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                v-for="item in countryitems"
                :key="item.guid"
              >
                <img :src="item.listImage" />
              </div