Swiper轮播图源码分享解析

巴扎黑

发布： 2018-05-28 17:04:48

原创

4593 人浏览过

今天咱们来说一下.Swiper轮播图.

超级简单的:

翠花,上代码:</p>

<br>

登录后复制

<!DOCTYPE html>

登录后复制

<html lang="en">

登录后复制

<head>

登录后复制

<meta charset="utf-8">

登录后复制

<title>Swiper demo</title>

登录后复制

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

登录后复制

<!-- Link Swiper&#39;s CSS -->

登录后复制

<link rel="stylesheet" href="../dist/css/swiper.min.css?1.1.11">

登录后复制

<!-- Demo styles -->

登录后复制

<style>

登录后复制

html, body {

登录后复制

position: relative;

登录后复制

height: 100%;

登录后复制

body {

登录后复制

background: #eee;

登录后复制

font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

登录后复制

font-size: 14px;

登录后复制

color:#000;

登录后复制

margin: 0;

登录后复制

padding: 0;

登录后复制

.swiper-container {

登录后复制

width: 100%;

登录后复制

height: 100%;

登录后复制

.swiper-slide {

登录后复制

text-align: center;

登录后复制

font-size: 18px;

登录后复制

background: #fff;

登录后复制

/* Center slide text vertically */

登录后复制

display: -webkit-box;

登录后复制

display: -ms-flexbox;

登录后复制

display: -webkit-flex;

登录后复制

display: flex;

登录后复制

-webkit-box-pack: center;

登录后复制

-ms-flex-pack: center;

登录后复制

-webkit-justify-content: center;

登录后复制

justify-content: center;

登录后复制

-webkit-box-align: center;

登录后复制

-ms-flex-align: center;

登录后复制

-webkit-align-items: center;

登录后复制

align-items: center;

登录后复制

</style>

登录后复制

</head>

登录后复制

<body>

登录后复制

<!-- Swiper -->

登录后复制

<p class="swiper-container">

登录后复制

<p class="swiper-wrapper">

登录后复制

<p class="swiper-slide">Slide 1</p>

登录后复制

<p class="swiper-slide">Slide 2</p>

登录后复制

<p class="swiper-slide">Slide 3</p>

登录后复制

<p class="swiper-slide">Slide 4</p>

登录后复制

<p class="swiper-slide">Slide 5</p>

登录后复制

<p class="swiper-slide">Slide 6</p>

登录后复制

<p class="swiper-slide">Slide 7</p>

登录后复制

<p class="swiper-slide">Slide 8</p>

登录后复制

<p class="swiper-slide">Slide 9</p>

登录后复制

<p class="swiper-slide">Slide 10</p>

登录后复制

</p>

登录后复制

<!-- Add Pagination -->

登录后复制

</p>

登录后复制

</p>

登录后复制

<!-- Swiper JS -->

登录后复制

<script src="../dist/js/swiper.min.js?1.1.11"></script>

登录后复制

<!-- Initialize Swiper -->

登录后复制

<script>

登录后复制

var swiper = new Swiper(&#39;.swiper-container&#39;, {//小白点

登录后复制

pagination: &#39;.swiper-pagination&#39;,

登录后复制

paginationClickable: true

登录后复制

});

登录后复制

</script>

登录后复制

</body>

登录后复制

</html>

登录后复制

最后别忘了再打这些东西之前要引Swiper.css和Swiper.js插件哦!</p>

以上是Swiper轮播图源码分享解析的详细内容。更多信息请关注PHP中文网其他相关文章！

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

Swiper轮播图源码分享解析

今天咱们来说一下.Swiper轮播图.

超级简单的: