专栏首页前端资源使用 swiper 轮播插件遇到的问题及解决方法

使用 swiper 轮播插件遇到的问题及解决方法

swiper插件还是比较有名的,大家应该都不陌生。

我只是记录一下我在使用过程中遇到的几个属性,详细API大家可以直接去官网查看:Swiper4.x使用方法

初始化 Swiper:

var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal',//横向切换,默认:vertical(纵向切换)
    loop: true,//环路
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })

页面加载完再初始化:

$(document).ready(function () {
 ...
})

我在使用过程中遇到的一些问题:

默认切换按钮在轮播图的内部(图1),我需要把它放在外面(图2)

图1

图2

js并没有相应的配置项,我们可以把 .swiper-button-prev 和 .swiper-button-next 两个按钮标签移到 .swiper-container 标签的外面,然后在再嵌一层将它们包住,给它设置一个 padding ,然后需要在 CSS 中加一个 position: relative; 设置相对定位,如下图:

代码如下:

HTML:

<div class="swiper-box">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="banner.jpg"/></div>
            <div class="swiper-slide"><img src="banner.jpg"/></div>
            <div class="swiper-slide"><img src="banner.jpg"/></div>
        </div>
        <!-- 如果需要分页器 -->
        <!--<div class="swiper-pagination"></div>-->

        <!-- 如果需要导航按钮 -->
        <!--<div class="swiper-button-prev"></div>-->
        <!--<div class="swiper-button-next"></div>-->
    </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
</div>

样式也需要稍微调一下,CSS代码:

.swiper-box{
       width: 590px;
       padding: 30px;
       position: relative;
       margin: 0 auto;
}
.swiper-container {
       width: 530px;
}
.swiper-pagination{
       text-align: center;
       width: 590px;
}
.swiper-pagination-bullet{
       margin: 10px;
}

可以再添加一行标题:

稍微改一下样式,把它定位到图片下方:

.swiper-title{
        text-align: center;
        position: absolute;
        bottom: 10px;
        width: 100%;
        line-height: 36px;
        background: rgba(0,0,0,0.2);
        color: #FFF;
}

如下图:

分组显示:以3个为一行/组 在js中添加下面两行

  slidesPerView : 3,//一行显示3个
  slidesPerGroup : 3,//3个一组

设置间距:以20px为例

spaceBetween : 20,

两行显示:

    slidesPerColumn: 2,//显示2行

这里需要注意一下,我写了7个轮播图,却显示3个分页按钮,其实这里要注意一下 slidesPerGroup 属性,将其改为6(一页显示的个数)即可正常显示:

    slidesPerGroup : 6,

一个页面中写多个 Swiper 组件:

HTML:先写两个盒子用 class 进行区分

<div class="swiper-container swiper-container1">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="banner.jpg"/></div>
        <div class="swiper-slide"><img src="banner.jpg"/></div>
        <div class="swiper-slide"><img src="banner.jpg"/></div>
    </div>
    <div class="swiper-pagination pagination1"></div>
</div>
<div class="swiper-container swiper-container2">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="banner.jpg"/></div>
        <div class="swiper-slide"><img src="banner.jpg"/></div>
        <div class="swiper-slide"><img src="banner.jpg"/></div>
    </div>
    <div class="swiper-pagination pagination2"></div>
</div>

js 代码:定义两个 Swiper 盒子和分页按钮。

<script>
    var mySwiper1 = new Swiper('.swiper-container1', {
        direction: 'horizontal',
        pagination: {
            el: '.pagination1',
        },
    }),
        mySwiper2 = new Swiper('.swiper-container2', {
        direction: 'horizontal',
        pagination: {
            el: '.pagination2',
        },
    })
</script>

注意,我这里为了方便,只写了一个分页按钮,如果有前进后退和进度条等按钮,也要进行区分。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • swiper宽度超出后自动适应的tab关联切换导航

    声明:本文由w3h5原创,转载请注明出处:《swiper宽度超出后自动适应的tab关联切换导航》 https://www.w3h5.com/post/399.h...

    德顺
  • Vue项目中使用npm i swiper插件踩坑记录

    1、使用静态数据时,一切正常, Swiper 可以正常滚动和滑动。但是使用动态数据时,会出现不能自动滚动/播放甚至数据显示不正常的现象。

    德顺
  • js获取input上传文件的文件名和扩展名的方法

    使用 js 可以获取 input 上传文件的文件名和扩展名,这里我整理一下具体方法:

    德顺
  • swiper.animate实现轮播展示动画效果

    任我行RQ
  • swiper实现图片轮播功能

    swiper是一个相当强大的图片展示插件,下面我来介绍一下swiper的简单图片轮播功能。一般情况下我们所说的图片轮播就是在一个区域内有几张图片循环展示,有的可...

    无邪Z
  • vue中使用swiper-slide时,循环轮播失效?

      vue 项目中使用时,组件swiper-slide 如果用v-for循环的话,loop:true 就不能无缝轮播,每次轮播到最后一张就停止了???

    Dawnzhang
  • Java单体应用 - 项目实战(后台) - 03.后台账户管理 - 06.搜索功能

    原文地址:http://www.work100.net/training/monolithic-project-iot-cloud-admin-manager-...

    光束云
  • 手势魅力-设置一个触摸菜单

    本篇为一移动端博文,个人觉得这篇外文还可以,就翻译了一下,最终实现的一个效果是:用手势创建一个本地菜单(点击一菜单按钮,实现设置一个触摸侧滑,滑动滑出效果,如下...

    itclanCoder
  • Vue学习笔记之Vue指令系统介绍

    所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了。

    Jetpropelledsnake21
  • ASP.NET Core教程【二】从保存数据看Razor Page的特有属性与服务端验证

    前文索引: ASP.NET Core教程【一】关于Razor Page的知识 在layout.cshtml文件中,我们可以看到如下代码: <a asp-page...

    liulun

扫码关注云+社区

领取腾讯云代金券