Swiper开篇

一 关于Swiper

 swiper是一款轻量级以及免费的移动设备触控滑块的js框架,主要运用于移动端的操作,但也可以用于pc端页面效果制作,完全的开源免费,

二 学习Swiper

 Swiper官网提供了学习方法以及API文档,为我们学习提供了很大的帮助,在学习之前可以先看一下官网的在线演示效果,包括基础演示和精彩移动端以及PC端的页面展示,了解Swiper的精彩之处,下面通过一个京东主页面的轮播来介绍Swiper(京东轮播图属于固定大小的轮播图,比较简单)

  1.准备工作

      首先我们需要下载swiper,官方网站提供,可以下载完整的zip文件包,也可以只下载这三个文件(jquery-1.11.3.min.js    swiper.min.js   swiper.min.css ),新建文件夹js和css,将js文件放在js中,将css文件放在css中,同时去京东官网获取轮播图片,放在image文件夹下

  2  新建html文件 

    将下载的文件引入到页面中,官网中介绍了,首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN

<title>京东轮播</title>
    <link rel="stylesheet" href="css/swiper.min.css" >
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/swiper.min.js"></script>

 3  HTML内容。

    <div class="swiper-container myswiper"> //一个大容器装载内容,高度是有内部的内容撑起
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <a href="#"> //因为京东的图片是链接,图片包裹在a中
                <img src="image/1.jpg" alt="">  //可以直接获取图片的网页地址
            </a>
        </div>
        <div class="swiper-slide">
             <a href="#">
                <img src="image/2.jpg" alt="">
            </a>
        </div>
        <div class="swiper-slide">
             <a href="#">
                <img src="image/3.jpg" alt="">
            </a>
        </div>
        <div class="swiper-slide">
             <a href="#">
                <img src="image/4.jpg" alt="">
            </a>
        </div>
        <div class="swiper-slide">
             <a href="#">
                <img src="image/5.jpg" alt="">
            </a>
        </div>

    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div> //就是下面的小圆点
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev swiper-button-white butt"></div> //向左的箭头
    <div class="swiper-button-next"></div> //向右的箭头
    
     <!--如果需要滚动条 -->
    <!--<div class="swiper-scrollbar"></div>//此处不需要,京东轮播图不需要
</div>-->

3 .给Swiper定义一个大小

        因为京东图片大小为540*470,你可以直接在swiper-container中定义大小,也可以重新定义一个class来定义大小(此处我用myswiper)

   *{
            margin:0;
            padding:0;
        }
        .myswiper{
            width:590px;
            height: 470px;
        }

4.初始化Swiper:最好是挨着</body>标签(如果没有紧挨着可以在函数前加onload函数)

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    // direction: 'vertical', //京东默认为水平滑动,因此不需要,如果是垂直方向滑动,加上此属性
    loop: true,//此处代表环路,就是滑动到最后一张之后,又重新回到第一章图片,形成一个环路
    autoplay:1000, //表示自动轮播
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',//图片切换至某页,小圆点颜色改变
      clickable: true,
      clickableClass : 'my-pagination-clickable',//后两句表面鼠标点击小圆点时,也能切换,
    
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },//前进和后退的按钮,有很多样式的按钮,可以改变大小和颜色
    
    // 如果需要滚动条
    // scrollbar: {
    //   el: '.swiper-scrollbar',
    // },
  })        
  </script>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>京东轮播</title>
    <link rel="stylesheet" href="css/swiper.min.css" >
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <style>
//需要更改那个属性,就重新写css样式进行覆盖
        *{
            margin:0;
            padding:0;
        }
        .myswiper{
            width:590px;
            height: 470px;
            border:1px solid red;
        }
        .swiper-button-next, .swiper-button-prev{
            width:20px;
            height: 21px;

        }
        .mySwiperBut{
            background-image: none;
            width:24px;
            height: 40px;
            background: rgba(0,0,0,.3);
            text-align: center;
            line-height: 40px;
            color: hsla(0,0%,100%,.4);
            font-size: 18px;
 
        }//向前向后按钮的共同样式
        .mySwiperBut:hover{
             background: rgba(0,0,0,.6);
        }
        .swiper-pagination-bullet{
            width: 7px;
            height: 7px;
            border:2px solid #fff;
            transition: all .2s ease;
            background: transparent;
             z-index: 1000000;
        }//分页小圆点的样式
        .swiper-button-prev {
            left: 0px;
        }
        .swiper-button-next {
            right: 0px;
        }
        .swiper-pagination{
            text-align: left;
            margin-left: 46px;
            bottom:20px;
        }
        .swiper-pagination-bullet-active{
            background: #fff;
            opacity: 1;
            /*border:2px solid #b9beba;*/
            /*transition: background .2s ease;*/

        }
    </style>
</head>
<body>
    <div class="swiper-container myswiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <a href="#">
                <img src="image/1.jpg" alt="">
            </a>
        </div>
        <div class="swiper-slide">
             <a href="#">
                <img src="image/2.jpg" alt="">
            </a>
        </div>
        <div class="swiper-slide">
             <a href="#">
                <img src="image/3.jpg" alt="">
            </a>
        </div>
        <div class="swiper-slide">
             <a href="#">
                <img src="image/4.jpg" alt="">
            </a>
        </div>
        <div class="swiper-slide">
             <a href="#">
                <img src="image/5.jpg" alt="">
            </a>
        </div>

    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev  mySwiperBut"><</div>
    <div class="swiper-button-next  mySwiperBut">></div>
    
     <!--如果需要滚动条 -->
    <!--<div class="swiper-scrollbar"></div>
</div>-->
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    // direction: 'vertical',
    loop: true,
    autoplay:true,
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      clickableClass : 'my-pagination-clickable',
    
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    // scrollbar: {
    //   el: '.swiper-scrollbar',
    // },
  })        
  </script>
</body>
</html>

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coding for love

CSS入门4-引入CSS

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

853
来自专栏腾讯NEXT学位

小程序iOS客户端框架——控件事件逻辑框架与控件原生化(下)

? 小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打...

1604
来自专栏DeveWork

移动Web 开发中的一些前端知识收集汇总

在开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下。 要说移动Web...

2245
来自专栏CSDN技术头条

React开发实践:如何做出好用的Switch组件

前言 HTML5 将 Web 开发者的战场从传统的 PC 端带到了移动端。然而移动端交互的核心在于手势和滑动,如果只是将 PC 端的点击体验简单地移植到移动端,...

2609
来自专栏happyJared

IDEA快捷键拆解系列(十三):Window篇

  以下是关于Window导航项及其每一子项的拆解介绍,其中,加粗部分的选项是博主认为比较重要的。

3171
来自专栏守候书阁

css写作建议和性能优化小结

还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于cs...

1032
来自专栏24K纯开源

Qt Style Sheet实践(二):组合框QComboBox的定制

导读      组合框是一个重要且应用广泛的组件,一般由两个子组件组成:文本下拉单部分和按钮部分。在许多既需要用户选择、又需要用户手动输入的应用场景下,组合框能...

7147
来自专栏一“技”之长

Xcode关于警告AutomaticPreferredMaxLayoutWidth的消除方法

     在iOS开发中,如果使用到了storyboard与xib文件并且使用autolayout进行自动布局,有时会报出Automatic Preferred...

513
来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 控件

手风琴是个垂直罗列的元素组合,例如标签或缩略图,这允许用户切换内容模块的展示。每个标签元素可以被用来展开折叠、暴露隐藏其相关内容。手风琴一般被用来减少页面滚动,...

2913
来自专栏我的博客

wordpress导航

搞wordpress没有几天,今晚准备分几个栏目写文章的时候可以分门别类,结果导航不知道才能显示出来我添加的子栏目。。。。纠结了于是找到摸索了半天终于找到了。下...

3365

扫码关注云+社区

领取腾讯云代金券