点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

Swiper轮播图源码分享解析

来源：动视网责编：小采时间：2020-11-27 15:31:00

Swiper轮播图源码分享解析: 今天咱们来说一下.Swiper轮播图.超级简单的:翠花,上代码:<br><!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Swiper dem

推荐度：

点击下载本文 文档为doc格式

导读Swiper轮播图源码分享解析: 今天咱们来说一下.Swiper轮播图.超级简单的:翠花,上代码:<br><!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Swiper dem

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

翠花,上代码:

<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'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 class="swiper-pagination"></p>

</p>

<!-- Swiper JS -->

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

<!-- Initialize Swiper -->

<script>

var swiper = new Swiper('.swiper-container', {//小白点

pagination: '.swiper-pagination',

paginationClickable: true

});

</script>

</body>

</html>

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

Swiper轮播图源码分享解析: 今天咱们来说一下.Swiper轮播图.超级简单的:翠花,上代码:<br><!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Swiper dem

推荐度：

点击下载本文 文档为doc格式

标签：代码 sw 源码