编程 Javascript

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

Posted in Javascript onDecember 28, 2017

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

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

也就是需要把左右切换的箭头移到容器的外面，自定义箭头的样式。
给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>

效果如下

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

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

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

- Author -

_六月

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery Ajax之$.get()方法和$.post()方法

Oct 12 Javascript

基于JQuery框架的AJAX实例代码

Nov 03 Javascript

Ext JS 4实现带week(星期)的日期选择控件(实战一)

Aug 21 Javascript

node.js中的fs.fchownSync方法使用说明

Dec 16 Javascript

JavaScript比较两个对象是否相等的方法

Feb 06 Javascript

JS实现上下左右对称的九九乘法表

Feb 22 Javascript

js querySelector() 使用方法

Dec 21 Javascript

PHP7新特性简述

Jun 11 Javascript

手机注册发送验证码倒计时的简单实例

Nov 15 Javascript

vue中使用element组件时事件想要传递其他参数的问题

Sep 18 Javascript

原生JS运动实现轮播图

Jan 02 Javascript

node.js如何自定义实现一个EventEmitter

Jul 16 Javascript

swiper移动端轮播插件（触碰图片之后停止轮播）

Dec 28 #Javascript

Vue组件通信之Bus的具体使用

Dec 28 #Javascript

基于Swiper实现移动端页面图片轮播效果

Dec 28 #Javascript

Swiper自定义分页器使用详解

Dec 28 #Javascript

swiper自定义分页器使用方法详解

Sep 14 #Javascript

JavaScript实现数值自动增加动画

Dec 28 #Javascript

详解如何优雅地在React项目中使用Redux

Dec 28 #Javascript