swiper的基础使用(十四)

本文为H5EDU机构官方的HTML5培训教程 swiper教程swiper教程
 
这次内容我们介绍如何在swiper页面当中开启循环模式。
首先让我们用积累了十四节……不十三节的功力来搭建一个基本的swiper的布局。并且根据需要来设置CSS样式。

 <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">H5EDU 1<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 2<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 3<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 4<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 5<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 6<img src="logo.png"></div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

然后到js当中进行页面的初始化,再加上我们的循环属性(loop:true).

 var swiper = new Swiper(‘.swiper-container‘,{
                pagination:‘.swiper-pagination‘,
                paginationClickable:true,
                nextButton:‘.swiper-button-next‘,
                prevButton:‘.swiper-button-prev‘,
                slidesPerView:1,
                spaceBetween:30,
                loop:true  //开启循环属性
            });

完成之后我们就可以一直进行翻页了,能玩三天三夜,还不会累!

点击进入swiper强化教程

时间: 2024-10-01 03:38:34

swiper的基础使用(十四)的相关文章

Android基础之十四数据存储 之 SQLite数据库详解

Android基础之十四数据存储 之 SQLite数据库详解 SQLite 是一款 轻量级的关系型数据库,它的运算速度非常快,占用资源很少,通常只需要几百 K 的内存就足够了,因而特别适合在移动设备上使用. SQLite 不仅支持标准的 SQL 语法,还遵循了数据库的 ACID( 原子性(Atomicity) .一致性(Consistency) . 隔离性(Isolation) . 持久性(Durability))事务,所以只要你以前使用过其他的关系型数据库,就可以很快地上手 SQLite.而

Bootstrap&lt;基础二十四&gt; 缩略图

Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 class .thumbnail 的 <a> 标签. 这会添加四个像素的内边距(padding)和一个灰色的边框. 当鼠标悬停在图像上时,会动画显示出图像的轮廓. 下面的实例演示了默认的缩略图: <!DOCTYPE html> <html> <head> &l

linux基础-第十四单元 Linux网络原理及基础设置

第十四单元 Linux网络原理及基础设置 三种网卡模式图 使用ifconfig命令来维护网络 ifconfig命令的功能 ifconfig命令的用法举例 使用ifup和ifdown命令启动和停止网卡 ifup命令的功能 ifdown命令的功能 ifup命令的用法举例 ifdown命令的用法举例 网络配置文件 网卡对应的网络配置文件 什么是网络配置 ip命令 ping命令 setup命令 课后作业 [本节内容]1. 使用ifconfig命令来维护网络(详见linux系统管理P422)1) 掌握if

Oracle基础笔记十四

第十四章 高级子查询 1.子查询 子查询 (内查询) 在主查询执行之前执行 主查询(外查询)使用子查询的结果 SELECT select_list FROM table WHERE expr operator (SELECT select_list FROM  table); 问题:查询工资大于149号员工工资的员工的信息 SELECT last_name FROM   employees WHERE  salary > (SELECT salary FROM   employees WHERE

swiper的基础使用(四)

当然事先不要忘记引用下载好的框架文件.这一章我们添加了设置容器的宽.高 <!doctype html><html>    <head>        <title>在slide之间加上间隙</title>        <meta charset="utf-8">        <link rel="stylesheet" href="swiper.min.css"&g

Android学习之基础知识十四 — Android特色开发之基于位置的服务

一.基于位置的服务简介 LBS:基于位置的服务.随着移动互联网的兴起,这个技术在最近的几年里十分火爆.其实它本身并不是什么时髦的技术,主要的工作原理就是利用无线电通讯网络或GPS等定位方式来确定出移动设备所在的位置,而这种技术早在很多年前就已经出现了. 那么为什么LBS技术直到最近几年才开始流行呢?这主要是因为,在过去移动设备的功能及其有限,即使定位到了设备所在的位置,也就仅仅只是定位到了而已,我们并不能在位置的基础上进行一些其他的操作.而现在就大大不同了,有了Android系统作为载体,我们可

Python基础(十四)-并发编程

一.操作系统 参考文档:https://www.cnblogs.com/yuanchenqi/articles/6248025.html 二.进程与线程 2.1.进程简介 进程:一个程序在一个数据集上的一次动态执行过程,一般由程序.数据集.进程控制块三部分组成 程序:用来描述进程要完成哪些功能以及如何完成 数据集:程序在执行过程中所需要使用的资源 进程控制块:记录进程的外部特征,描述进程的执行变化过程,系统可以利用它来控制和管理进程,它是系 统感知进程存在的唯一标志 2.2.线程 线程:轻量级进

IT十八掌作业_java基础第十四天_IO

1.定义函数,输出一个byte的二进制字符串. 2.定义工具类,完成int数和byte[]之间的相互转换. 3.阐述IO流. 输入输出流 字符字节流 缓冲和非缓冲流 转换流. 4.通过File对象打印输出指定路径下的整个目录树结构. 5.完成文件夹复制. --------------------------------------------- 1. package com.it18zhang.day14; public class ByteToBin { public static void

CSS基础学习十四:盒子模型补充之display属性设置

我在CSS基础学习十三:盒子模型的i博文只是阐释了CSS盒子模型,并没有过多的使用实例来演示.这篇博文 就来做一些盒子模型知识的补充.这一部分对于网页总体布局还是蛮重要的,过去大多数使用HTML中的table元素和 框架标签来进行网页的整体布局,现在我们使用最多的是DIV+CSS网页布局.所以一定要掌握好盒子模型,记住 content,border,padding和margin各自在盒子中的作用和使用方式. 先来看一个完整元素的盒子模型实例: <!DOCTYPE html PUBLIC "

安卓基础(十四)

拿个小本子记上 拿个小本子记上 简介 正文 扩展阅读 目标人群:没有基础的安卓初学者 知识点: SharedPreferences类的简单使用 目标:记录简单的键值对数据 简介 SharedPreferences 的创建 SharedPreferences 数据的写入和读取 正文 1.首先我们需要创建一个SharedPreferences类对象,最简单的代码如下 SharedPreferences preferences= getPreferences(Context.MODE_PRIVATE)