swiper插件自定义切换箭头按钮

不知道大家在使用swiper时有没有遇到这样一种需求，swiper插件自定义切换箭头按钮，话不多说，直接上gif。

也就是需要把左右切换的箭头移到容器的外面，自定义箭头的样式。
给swiper容器再加一个父容器，两个容器之间留下间隙，箭头定位到间隙之间就ok了。
箭头默认是绝对定位的，给父容器一个相对定位，就能够调整箭头位置。此外箭头用的是背景图，改变箭头大小的同时记得改变背景图大小。上代码。

css:

<style>
    .out_container{
      width: 280px;
      height: 150px;
      margin: 100px auto;
      position: relative;
      outline: 1px solid black;
    }
    .in_container{
      width: 216px;
      height: 130px;
      margin: 0 auto;
      overflow: hidden;
    }
    .swiper_btn{
      width: 20px;
      height: 20px;
      background-size: contain;
    }
  </style>

html:

<body>
  <div class="out_container">
    <div class="in_container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="" alt=""></div>
        <div class="swiper-slide"><img src="" alt=""></div>
        <div class="swiper-slide"><img src="" alt=""></div>
      </div>
      <div class="swiper-button-prev swiper_btn"></div>
      <div class="swiper-button-next swiper_btn"></div>
    </div>
  </div>
</body>

js:

<script>
  var mySwiper = new Swiper('.in_container', {
    prevButton: '.swiper-button-prev',
    nextButton: '.swiper-button-next',
  })
</script>

效果如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】

    微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】

    本文实例讲述了微信小程使用swiper组件实现图片轮播切换显示功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml: <swiper indicator-dots="true"autoplay="true" interval="3000" duration="600" style="height:300px;"> <swiper-item> <

  • 微信小程序 swiper制作tab切换实现附源码

    微信小程序 swiper制作tab切换实现附源码

    微信小程序 swiper制作tab切换 实现效果图: swiper制作tab切换 index.html <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Seside1</view> <view

  • 微信小程序实现tab和swiper切换结合效果

    微信小程序实现tab和swiper切换结合效果

    本文实例为大家分享了小程序实现tab和swiper切换效果展示的具体代码,供大家参考,具体内容如下 先上效果图: 实现代码如下: wxml页面 <scroll-view scroll-x="true" class="weui-navbar"> <block wx:for-items="{{tabs}}"> <view id="{{index}}" class="{{activeIndex

  • 移动端触屏幻灯片图片切换插件idangerous swiper.js

    移动端触屏幻灯片图片切换插件idangerous swiper.js

    强大的移动端触屏幻灯片图片和HTML内容切换插件idangerous swiper,支持自定义左右切换还是上下切换,支持多个分组切换,支持下拉更新切换,支持TAB方式切换等十几种切换效果,支持众多的选项配置,如: speed:切换的速度(毫秒) autoplay:自动播放的速度 mode:切换模式 horizontal(横向) vertical(竖向) loop:是否循环播放true false 如此强大的配置功能,值得使用. 使用方法: 1.加载插件 <link rel="stylesh

  • swiper插件自定义切换箭头按钮

    swiper插件自定义切换箭头按钮

    不知道大家在使用swiper时有没有遇到这样一种需求,swiper插件自定义切换箭头按钮,话不多说,直接上gif. 也就是需要把左右切换的箭头移到容器的外面,自定义箭头的样式. 给swiper容器再加一个父容器,两个容器之间留下间隙,箭头定位到间隙之间就ok了. 箭头默认是绝对定位的,给父容器一个相对定位,就能够调整箭头位置.此外箭头用的是背景图,改变箭头大小的同时记得改变背景图大小.上代码. css: <style> .out_container{ width: 280px; height:

  • vue如何使用swiper插件修改左右箭头的默认样式

    目录 使用swiper插件修改左右箭头的默认样式 vue中修改swiper样式问题 原因 解决方法 总结 使用swiper插件修改左右箭头的默认样式 效果图 修改箭头的背景,以及颜色 .swiper-button-prev, .swiper-button-next{ color: #fff; background: #5e5f5e; } 修改箭头的大小 .swiper-button-prev:after, .swiper-button-next:after { font-size: 14px;

  • jquery实现标签支持图文排列带上下箭头按钮的选项卡

    带上下箭头jquery垂直tab选项卡切换标签,技持左侧列表上下滚动,滚动到底部带信息提示. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • jQuery DataTables插件自定义Ajax分页实例解析

    jQuery DataTables插件自定义Ajax分页实例解析

    一.问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数据条数(pageSize),显示相应页的显示记录,且不能修改后端接口. 二.分析 先来分析下分页实现. 一是后端分页:这种情况下,在后端很容易实现,在官网上有示例,不多说明. 二是前端分页:前端分页也是支持的,不过需要一次把所有数据都获取到才可以. 看到这里,问题来了.由于后端在目前的情况下是更改不

  • jQuery UI插件自定义confirm确认框的方法

    本文实例讲述了jQuery UI插件自定义confirm确认框的方法.分享给大家供大家参考.具体分析如下: 这段代码通过jQuery UI自定义了一个confirm的确认对话框效果,通过html代码自定义对话框的显示界面和外观,可以自定义confirm框的按钮,本例中定义了一个confirm确认按钮和一个cancel取消按钮. html代码 <button id="callConfirm">Confirm!</button> <div id="d

  • vue项目中导入swiper插件的方法

    vue项目中导入swiper插件的方法

    版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: npm i swiper@3.4.2 -S 这里一个小知识,查看node包的所有版本号的方法: npm view 包名 versions 组件编写 swiper官方的使用方法分为4个流程: 加载插件 HTML内容 给Swiper定义一个大小 初始化Swiper 我也按照这个流程编写组件: 加载插件

  • 解决vue中使用swiper插件问题及swiper在vue中的用法

    Swiper简介 Swiper常用于移动端网站的内容触摸滑动. Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行问题 这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template> <div clas

  • 解决vue中使用swiper 插件出错的问题

    由于我自己在写一个demo时候用到了该插件,出现了一些问题,所以就简单查了一下该插件的用法以及一些常见的错误 1.出现Get .../maps/swiper.min.js.map 500(Internal Server Error) 使用min版本时缺少Source Map文件 1. 禁止Source Map提示,删除swiper.min.js文件的最后一行//# sourceMappingURL=swiper.min.js.map即可 2. 如需要使用Source Map,完整包里面有该文件s

  • vue引入swiper插件的使用实例

    本文介绍了vue引入swiper插件,分享给大家,希望对大家有帮助 步骤一:安装vue, $ npm install vue 步骤二:创建vue项目 # 全局安装 vue-cli $ npm install -g vue-cli $ cd my-project $ npm install $ npm run dev 上面这些就是安装好vue项目,最主要的就是下面的步骤 步骤三:下载好swiper相关的js和css,js放在static目录下,css放在assets目录下. 步骤四:  安装run

  • iOS中给自定义tabBar的按钮添加点击放大缩小的动画效果

    之前想过一些通过第三方的方式实现动画,感觉有点麻烦,就自己写了一个 不足之处还望大家多多指出 // 一句话,写在UITabBarController.m脚本中,tabBar是自动执行的方法 // 点击tabbarItem自动调用 -(void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item { NSInteger index = [self.tabBar.items indexOfObject:item]; [self a

随机推荐