基于swiper的两边叠加轮播图

已于 2022-10-27 17:03:53 修改
阅读量1.8k 收藏 10
点赞数
文章标签： 前端
于 2022-10-27 16:55:10 首次发布
原文链接：https://dandelioncloud.cn/article/details/1471391460330397697/
版权

今天有个需求是做轮播图，用的swiper，没有找到合适的两边叠加的，最后终于找到了，搬一下，再改一下大小，我也可以用了，哈哈哈

原文地址：点击进入

注意，swiper插件是4.5版本，比较老的了，新版有更简单的办法

 

下边是我改的，去掉了分页器，下边圆圈，还有把大小改了

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
   <script src="./swiper.min.js"></script>
   <link rel="stylesheet" href="./swiper.min.css">
    <style>
    #certify {
        position: relative;
        /* width: 1200px; */
        width: 300px;

        margin: 0 auto
    }
    #certify .swiper-container {
        /* padding-bottom: 60px; */
    }
    #certify  .swiper-slide {
        width: 110px;
        height: 100px;
        background: #fff;
        box-shadow: 0 4px 15px #ddd;
    }
    #certify  .swiper-slide img{
        display:block;
    }
    #certify .swiper-pagination {
        width: 100%;
        bottom: 10px;
    }
    #certify .swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 5px;
        border: 3px solid #fff;
        background-color: #d5d5d5;
        width: 5px;
        height: 5px;
        opacity: 1;
    }
    #certify .swiper-pagination-bullets .swiper-pagination-bullet-active {
        border: 3px solid #00aadc;
        /* background-color: #fff; */
    }
    .pop_lc_logo {
      display: block;
      width: 100px;
    }
/* 
    #certify .swiper-button-prev {
        left: -30px;
        width: 45px;
        height: 45px;
        background: url(../images/wm_button_icon.png) no-repeat;
        background-position: 0 0;
        background-size: 100%;
    }
    #certify .swiper-button-prev:hover {
        background-position: 0 -46px;
        background-size: 100%
    }
    #certify .swiper-button-next {
        right: -30px;
        width: 45px;
        height: 45px;
        background: url(../images/wm_button_icon.png) no-repeat;
        background-position: 0 -93px;
        background-size: 100%;
    }
    #certify .swiper-button-next:hover {
        background-position: 0 -139px;
        background-size: 100%
    } */
</style>

    </style>
  </head>
  <body>
    <div id="certify">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img class="pop_lc_logo" src="https://m.360buyimg.com/babel/jfs/t1/185179/19/29789/29437/6358e59eE023f01d0/6678e14da2621a01.png" alt="">
                </div>
                <div class="swiper-slide">
                  <img class="pop_lc_logo" src="https://m.360buyimg.com/babel/jfs/t1/185179/19/29789/29437/6358e59eE023f01d0/6678e14da2621a01.png" alt="">
                </div>         <div class="swiper-slide">
                  <img class="pop_lc_logo" src="https://m.360buyimg.com/babel/jfs/t1/185179/19/29789/29437/6358e59eE023f01d0/6678e14da2621a01.png" alt="">
                </div>         <div class="swiper-slide">
                  <img class="pop_lc_logo" src="https://m.360buyimg.com/babel/jfs/t1/185179/19/29789/29437/6358e59eE023f01d0/6678e14da2621a01.png" alt="">
                </div>         <div class="swiper-slide">
                  <img class="pop_lc_logo" src="https://m.360buyimg.com/babel/jfs/t1/185179/19/29789/29437/6358e59eE023f01d0/6678e14da2621a01.png" alt="">
                </div>
            </div>
        </div>
    </div>
  </body>
</html>
<script>
  var certifySwiper = new Swiper("#certify .swiper-container", {
    watchSlidesProgress: true,  
    slidesPerView: "auto",
    centeredSlides: true,
    loop: true,
    autoplay: true,
    loopedSlides: 5,
    autoplay: true,
    // navigation: {
    //   nextEl: ".swiper-button-next",
    //   prevEl: ".swiper-button-prev",
    // },
    // pagination: {
    //   el: ".swiper-pagination",
    //   //clickable :true,
    // },
    on: {
      progress: function (progress) {
        for (i = 0; i < this.slides.length; i++) {
          var slide = this.slides.eq(i);
          var slideProgress = this.slides[i].progress;
          modify = 1;
          if (Math.abs(slideProgress) > 1) {
            modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
          }
          translate = slideProgress * modify * 40 + "px";
          scale = 1 - Math.abs(slideProgress) / 4;
          zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
          slide.transform("translateX(" + translate + ") scale(" + scale + ")");
          slide.css("zIndex", zIndex);
          slide.css("opacity", 1);
          if (Math.abs(slideProgress) > 3) {
            slide.css("opacity", 0);
          }
        }
      },
      setTransition: function (transition) {
        for (var i = 0; i < this.slides.length; i++) {
          var slide = this.slides.eq(i);
          slide.transition(transition);
        }
      },
    },
  });
</script>

项目是手机端的，用的不是px，还有一份rem的，自动播放关闭，循环关闭

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./swiper.min.js"></script>
    <link rel="stylesheet" href="./swiper.min.css" />
    <style>
      /*轮播图*/
      .swip {
        width: 6.37rem;
        height: 3.6rem;
        /*box-shadow: 0.07rem 0 0.25rem 0*/
        /*rgba(53, 43, 33, 0.16);*/
        /*background-color: blue;*/
        margin-top: 0.45rem;
        margin-bottom: 0.3rem;

        display: flex;
        justify-content: center;
        align-items: center;
      }
      /*轮播图*/
      #certify {
        position: relative;
        width: 6rem;
        margin: 0 auto;
      }
      #certify .swiper-container {
        padding-bottom: 1.2rem;
      }
      #certify .swiper-slide {
        width: 2.2rem;
        height: 2rem;
        /*background: #fff;*/
        /*box-shadow: 0 4px 15px #ddd;*/
      }
      #certify .swiper-slide img {
        display: block;
      }
      #certify .swiper-pagination {
        width: 100%;
        bottom: 0.2rem;
      }
      #certify .swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 1rem;
        /*border: 3px solid #fff;*/
        /*background-color: #d5d5d5;*/
        width: 1rem;
        height: 1rem;
        opacity: 1;
      }
      #certify .swiper-pagination-bullets .swiper-pagination-bullet-active {
        border: 0.06rem solid #00aadc;
        /* background-color: #fff; */
      }
      .swiper-slide img {
        display: block;
        width: 3rem;
      }
    </style>
  </head>
  <body>
    <div id="certify">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img
              class="pop_lc_logo"
              src="https://m.360buyimg.com/babel/jfs/t1/185179/19/29789/29437/6358e59eE023f01d0/6678e14da2621a01.png"
              alt=""
            />
          </div>
          <div class="swiper-slide">
            <img
              class="pop_lc_logo"
              src="https://m.360buyimg.com/babel/jfs/t1/185179/19/29789/29437/6358e59eE023f01d0/6678e14da2621a01.png"
              alt=""
            />
          </div>
          <div class="swiper-slide">
            <img
              class="pop_lc_logo"
              src="https://m.360buyimg.com/babel/jfs/t1/185179/19/29789/29437/6358e59eE023f01d0/6678e14da2621a01.png"
              alt=""
            />
          </div>
          <div class="swiper-slide">
            <img
              class="pop_lc_logo"
              src="https://m.360buyimg.com/babel/jfs/t1/185179/19/29789/29437/6358e59eE023f01d0/6678e14da2621a01.png"
              alt=""
            />
          </div>
          <div class="swiper-slide">
            <img
              class="pop_lc_logo"
              src="https://m.360buyimg.com/babel/jfs/t1/185179/19/29789/29437/6358e59eE023f01d0/6678e14da2621a01.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

<script>
  var certifySwiper = new Swiper("#certify .swiper-container", {
    watchSlidesProgress: true,
    slidesPerView: "auto",
    centeredSlides: true,
    // loop: true,
    // autoplay: true,
    loopedSlides: 5,
    // autoplay: true,
    initialSlide: 1, //默认第二个

    on: {
      progress: function (progress) {
        for (i = 0; i < this.slides.length; i++) {
          var slide = this.slides.eq(i);
          var slideProgress = this.slides[i].progress;
          modify = 1;
          if (Math.abs(slideProgress) > 1) {
            modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
          }
          translate = slideProgress * modify * 0.8 + "rem";
          scale = 1 - Math.abs(slideProgress) / 4;
          zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
          slide.transform("translateX(" + translate + ") scale(" + scale + ")");
          slide.css("zIndex", zIndex);
          slide.css("opacity", 1);
          if (Math.abs(slideProgress) > 3) {
            slide.css("opacity", 0);
          }
        }
      },
      setTransition: function (transition) {
        for (var i = 0; i < this.slides.length; i++) {
          var slide = this.slides.eq(i);
          slide.transition(transition);
        }
      },
    },
  });
</script>

前端小白007
关注
OpenHarmony实战开发-创建轮播 (Swiper)
2401_82546228的博客
04-26 1138
Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。
基于swiper轮播图
09-19
该轮播图一屏显示三张图片，中间图片放大，两边图片缩小效果。基于swiper的完美轮播图，提供给大家参考！效果图参考：https://blog.csdn.net/qq_20757489/article/details/101024851
【鸿蒙ArkUI实战开发】基于Swiper的页面布局
MNXN666的博客
07-26 394
给Swiper组件设置.nextMargin(50).prevMargin(50)属性。给Swiper组件添加onChange事件，设置当前this.currentIndex=index，当currentIndex为首页或者尾页时，设置上一张以及下一张图片的缩放值。// 设置当前index缩放值为最大值// 当前index=0时，设置上一张图片的缩放值} else// 当前index不为0时，设置上一张图片的缩放值// 当index为最后一张图片时，设置下一张图片的缩放值} else。
swiper.js实现叠加轮播效果
m0_49529959的博客
06-09 2131
【代码】swiper.js实现叠加轮播效果。
微信小程序swiper实现层叠轮播图
dbeidouxingf的博客
01-10 2423
这个效果的变化是由swiper自动切换，触发bindchange方法推动的。没有显式的声明swiper的current。对于提供给用户切换箭头方法的层叠轮播图，需要声明swiper的current属性，用户的切换和current切换的事件会相互冲突，那个效果有时间再写吧。
微信小程序 swiper 组件实现层叠轮播图，同时在轮播图中自定义信息
03-24
微信小程序 swiper 组件实现层叠轮播图，同时自定义指示点样式和图片描述信息
react Swiper做出堆叠轮播图
qq_36257356的博客
06-21 2768
这个堆叠轮播的在网上找了很久，但是要么轮播的时候不流畅，要么不好随意设置成想要的效果，总之找到的都有大大小小的毛病，今天对Swiper这个进行研究，发现几个属性就可以做出满意的堆叠轮播图............
vue使用swiper实现中间大两边小的轮播图效果
10-15
在本文中，我们将深入探讨如何使用Vue.js和Swiper库来创建一个特殊的轮播图，该轮播图具有中间图片放大而两侧图片缩小的效果。Vue.js是一个流行的前端框架，Swiper则是一个强大的滑动组件，适合构建轮播图、幻灯片和...
vue使用swiper.js重叠轮播组建样式
12-30
本文实例为大家分享了vue使用swiper.js重叠轮播组建样式，供大家参考，具体内容如下 <swiper class=swiper options=swiperOption> <swiper class=swiper-slide> 一起来观看 Wes Anderson的色彩回旋舞...
微信小程序使用swiper实现层叠轮播图
weixin_42679187的博客
04-22 4161
刚开始并没有接触到层叠轮播图，拿到这个案列的时候特意查阅了一下资料，发现previousmargin和nextmargin可以试下层叠效果，就尝试着用了一下。 微信小程序XX.wxml下 <view class="banner-swiper"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autopl...
微信小程序层叠轮播图、3D轮播图
热门推荐
不讨喜~的博客
05-23 1万+
接到个新需求，在微信小程序做层叠轮播，看了小程序的官方API没有swiper那么好用的方法，然后就想到之前拿原生js代码写的层叠轮播，其实一个道理。在swiper中显示多于1个的swiper-item，然后每个swiper-item中间有一些间距，然后把swiper-item中的内容设成居中，最后将active的swiper-item放大，就做成了层叠轮播。 效果图 wxml代码 ...
js使用swiper实现层叠轮播效果实例代码
12-09
前言 swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好。 由于简单这里当然就不会去详细介绍了，下面就来开始本文的正文内容 实现过程： 一.移动端-需求swiper 4.0.3实现层叠轮播 二.实现效果如下 三.方案：查找了下发现使用swiper的切换效果coverflowEffect可以实现 　　1.coverflow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式 　　2.coverflow的属性： 　　　　rotate：slide做3d旋转时Y轴的旋转角度。默认50。 　　　　stretch：每个slide之间的拉伸值，越大slide
微信小程序使用swiper组件实现层叠轮播图
10-17
主要为大家详细介绍了微信小程序使用swiper组件实现层叠轮播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
12-12
旋转叠加 平移 前段时间做Hybrid App，UI设计湿要求某一个页面的展示要实现滑动轮播效果，选中的内容卡片居中显示，上一个内容卡片和下一个内容以小一倍的大小显示在选中的卡片后头，而且要高斯模糊等等。。最骚的是滑动特效要是一个个旋转叠加。（摔！ 当时用的是vue-cli-3 + ant-design-vue实现的页面，发现ant-design-vue里头有现成的Carousel组件可用，由于排期比较急，先暂时用这个实现了第一版，没有特效没有其他花里胡哨的展示。验收完第一版后，发现ant-design-vue的坑是真的多啊。。Carousel在移动端也是十分的不流畅。总是就是体验
vue2+swiper——实现多图轮播+层叠轮播——技能提升
yehaocheng520的博客
05-06 1915
vue2+swiper——实现多图轮播+层叠轮播——技能提升
微信小程序使用Swiper组件实现层叠轮播图
richest_qi的博客
08-05 3025
微信小程序使用Swiper组件实现层叠轮播图。
今日分享【微信小程序实现堆叠式轮播图】
fengGer的博客
05-06 1078
简单实现一个微信小程序【原生】轮播图...
vue3使用swiper11做轮播图
最新发布
09-25
在Vue3中使用Swiper 11做轮播图，你可以按照以下步骤操作： 1. 首先，你需要安装Swiper库。可以使用npm或者yarn来安装： ```bash npm install swiper@latest swiper-react@latest # 或者 yarn add swiper swiper-react ``` 2. 引入依赖到你的项目文件中： ```javascript import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/swiper-bundle.min.css'; // 如果使用CSS样式 ``` 3. 创建一个Vue组件并配置Swiper： ```html <template> <div class="swiper-container"> <Swiper :options="swiperOptions"> <SwiperSlide v-for="(item, index) in items" :key="index"> {{ item }} </SwiperSlide> </Swiper> </div> </template> <script> export default { data() { return { items: ['Slide 1', 'Slide 2', 'Slide 3'], // 图片或内容数组 swiperOptions: { loop: true, // 循环模式 autoplay: { delay: 3000, // 自动播放时间间隔 }, navigation: { // 导航设置 nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }, }; }, }; </script> <style scoped> .swiper-container { width: 100%; height: 400px; // 设置适配的尺寸 } </style> ``` 在这个例子中，`items`数组包含你的轮播图片或内容，`swiperOptions`是一个对象，定义了轮播图的各种选项，如循环、自动播放等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值