移动端多个swiper轮播的实现

最新推荐文章于 2023-06-18 00:37:09 发布
最新推荐文章于 2023-06-18 00:37:09 发布
阅读量252 收藏
点赞数
分类专栏： js 文章标签： javascript html5 es6 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanq2016/article/details/114418202
版权

不论是移动端还是pc端，都可以使用：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no"
    />
    <title>标题</title>
    <!-- 通用的样式：主要是html的font-size:100px -->
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/swiper.css" />
    <script src="./js/rem.js"></script>
    <script src="./js/swiper.js"></script>
    <style>
      .environment_item {
        width: 80%;
        margin: 0 auto;
        border-radius: 0.2rem;
      }
      .swiper-container {
        width: 100%;
        /* 图片的宽*高=234*153：此处一定要使用css的动态计算容器的高度 */
        height: calc(80vw * 153 / 234);
        border-radius: 0.2rem;
      }
      .swiper-wrapper {
        width: 100%;
        border-radius: 0.2rem;
        height: 100%;
      }
      .swiper-slide {
        width: 100%;
        height: 100%;
        border-radius: 0.2rem;
      }
      .swiper-slide img {
        width: 100%;
        height: 100%;
        border-radius: 0.2rem;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <ul id="work_environment">
        <li class="environment_item">
          <h3 class="title">办公环境</h3>
          <div class="swiper-container en-1">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="./img/work_enviroment01.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/work_enviroment02.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/work_enviroment03.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/work_enviroment04.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/work_enviroment05.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/work_enviroment06.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/work_enviroment07.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/work_enviroment08.png" alt="" />
              </div>
            </div>
          </div>
        </li>
        <li class="environment_item">
          <h3 class="title">健身项目</h3>
          <div class="swiper-container en-2">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="./img/running01.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/running02.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/running03.png" alt="" />
              </div>
            </div>
          </div>
        </li>
        <li class="environment_item">
          <h3 class="title">文体活动</h3>
          <div class="swiper-container en-3">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="./img/recreation01.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/recreation02.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/recreation03.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/recreation04.png" alt="" />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <script>
      //动态创建多个独立的Swiper对象，否则Swiper对象就只有一个，其它轮播会没有作用
      for (let i = 1; i <= 3; i++) {
        let str = ".en-" + i;
        new Swiper(str, {
          direction: "horizontal",
          loop: true,
          autoplay: {
            delay: 2000,
            disableOnInteraction: false,
          },
        });
      }
    </script>
  </body>
</html>

 

hanq2016
关注
专栏目录
基于Swiper实现移动端页面图片轮播效果
08-28
主要为大家详细介绍了基于Swiper实现移动端页面图片轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
移动端轮播图Swiper
weixin_50736511的博客
06-09 314
Swiper.vue <template> <div id="hy-swiper"> <div class="swiper" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"> <slot></slot> </div> <slot name="indicator">
在同一个页面中多次使用swiper 轮播插件，要避免相互影响
热门推荐
cvper's world !
06-18 1万+
在项目中使用轮播是很常见的，swiper 就是其中之一，pc 端，移动端都可以使用，效果还是不错的；曾经在写一个页面的时候，其中有两个轮播图，于是都用swiper 来写了，写完之后发现显示的效果不是预期的效果，有很大的问题；后来检查发现两个轮播图相互影响了，样式啥的冲突了，因为我没有单独的给container或者slide 起类名，所以样式相互冲突了；现在总结一下在同一个页面中使用多个 swipe...
移动端带swiper轮播图
qq_40770473的博客
10-01 130
移动端带swiper轮播图1效果图2项目简介下载地址 1效果图 2项目简介 ①带有swiper轮播图插件 ②移动端自适应 ③运用less 下载地址 百度云永久免费下载链接 提取码: h5ur
在一个html里用两个swiper,如何在swiper中使用两个轮播效果？
weixin_36423916的博客
06-27 1670
一个页面中引用多个Swiper可以给每个Swiper加上ID或Class区分，要保留默认的类名swiper-container。相同页面，轮播图1相同页面，轮播图2HTML...iPhone6外屏碎(显示正常)维修咨询...JSvar swiper0 = new Swiper ('#swiper0', {loop: true,// 如果需要分页器pagination: {el: '.swiper-...
移动端 swiper轮播做下拉加载上拉回到顶部，上下左右轮播功能
03-30
在这个特定的项目中，我们看到开发者实现了“移动端 Swiper 轮播做下拉加载上拉回到顶部，上下左右轮播功能”。这个功能集合了多个高级交互特性，使得用户界面更加动态和友好。 首先，让我们详细解释一下这些功能：...
js使用swiper实现层叠轮播效果实例代码
12-09
swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好。 由于简单这里当然就不会去详细介绍了，下面就来开始本文的正文内容 实现过程： 一.移动端-需求swiper 4.0.3实现层叠轮播 ...
swiper移动端轮播插件（触碰图片之后停止轮播）
08-28
总的来说，Swiper 是一个功能丰富的移动端轮播解决方案，它允许开发者灵活地控制轮播行为，包括触碰后是否停止轮播。通过理解并应用这些基本概念，你可以为你的网站或应用创建出流畅、互动性强的轮播效果。
swiper实现异形轮播效果
12-13
Swiper 是一个流行的JavaScript库，专为触摸设备设计，用于创建高质量的滑动内容，如轮播图、幻灯片和产品滑块。它支持多种动画效果和交互功能，使其成为开发响应式网页时的理想选择。 首先，我们要理解Swiper的...
Android-LoopBanner-可以自动轮播的无限循环banner
08-13
可以自动轮播的无限循环banner（An infinite loop banner that can be automatically rotated）
mui+vue+ajax实现轮播效果
10-17
mui结合vue实现轮播效果，在 Vue的生命周期钩子：updated 中 执行轮播。
Swiper动态加载不显示没效果(对使用多个swiper下标有时显示不出来的问题)
sx_lidan的博客
07-13 3240
Swiper动态加载不显示没效果 对使用多个swiper下标有时显示不出来的问题,如下图所示， 解决方法 只需要在Js中增加这两行代码即可； observer: true, //修改swiper自己或子元素时，自动初始化swiper observeParents: true, //修改swiper的父元素时，自动初始化swiper 个人尝试了是可以的。...
vue 轮播图的实现方法
小菜的OnePiece的博客
06-18 6039
以上是一个简单的Vue轮播图实现的示例。注意：上面的示例使用了默认的样式和配置。你可以根据需要自定义样式和配置，例如设置轮播图的宽度、高度、自动播放等。注意：上面的示例使用了默认的样式和配置。你可以根据需要自定义样式和配置，例如设置轮播图的宽度、高度、动画效果等。：在你的 Vue 项目中，通过 npm 或 yarn 安装。：在你的 Vue 项目中，通过 npm 或 yarn 安装。中定义了正确的图片路径数组，并根据需要自定义样式和配置。中定义了正确的图片路径数组，并根据需要自定义样式和配置。
vue仿京东h5头图视频/图片轮播效果组件
Franky
05-06 1866
<template> <div class="activity-rule"> <div v-if="videoUrl" style="position: relative;"> <!-- 视频和图片 --> <van-swipe class="my-swipe" indicator-color="#1989fa" :loop="false" :show-i
swiper移动端轮播图简单实现
云
04-08 1万+
【代码】swiper移动端轮播图简单实现。
swiper4.0（移动端）轮播图 - 案例篇
草巾冒小子的博客
05-18 3565
swiper4.0（移动端）轮播图 - 案例篇 官方演示地址：异形的slide · 点击前往查看 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper4.0 - 轮播图插件</title> <...
原生JS，html,css 一个页面使用多个swiper轮播图，以及swiper轮播图单轮播，多重轮播 源码demo，以及叠加显示隐藏切换问题，多轮播嵌套鼠标悬停等问题，循环播放无停顿设置
weixin_45502613的博客
04-23 1271
如果你想使用轮播图请先去swiper官网查看实例看是否有你需要的swiper官网 由于下面内容过长先给大家讲几种swiperd 功能 （1）swiper循环播放且无停顿 功能 css #thumbs5 .swiper-wrapper,{ -webkit-transition-timing-function: linear !important; /*之前是ease-out*/ -m...
基于 Vue 实现的 移动端图片轮播组件.
weixin_33841503的博客
08-22 2693
wc-swiper 基于 Vue 的移动端的图片轮播组件. why 之前一直在用 vue-awesome-swiper, 功能很齐全, 但是唯一的问题就是体积比较大. 我只是想要一个简单的图片轮播, 但是却要引入 100多k 大小的文件, 这样是不对的. 特点 支持自动播放 & 无限轮播 (loop) 效果 支持用户手动滑动 压...
js 使用swiper实现层叠轮播
weixin_34128501的博客
12-12 1417
一.移动端-需求swiper 4.0.3实现层叠轮播 二.实现效果如下 三.方案：查找了下发现使用swiper的切换效果coverflowEffect可以实现 　　1.coverflow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式 　　2.coverflow的属性： 　　　　rotate：slide做3d旋转时Y轴的旋转角度。默认50。　　　　stretch：每个sli...
vue移动端页面使用swiper
最新发布
09-10
对于Vue移动端页面使用swiper，你可以按照以下步骤进行操作： 1. 首先，安装swiper库。...以上是使用swiper库在Vue移动端页面上实现轮播效果的基本步骤。你可以根据自己的需求进一步调整和定制swiper的样式和功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值