Swiper轮播图源码分享解析

巴扎黑

Lepaskan： 2018-05-28 17:04:48

asal

4738 orang telah melayarinya

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

超级简单的:

翠花,上代码:</p>

<br>

Salin selepas log masuk

<!DOCTYPE html>

Salin selepas log masuk

<html lang="en">

Salin selepas log masuk

<head>

Salin selepas log masuk

<meta charset="utf-8">

Salin selepas log masuk

<title>Swiper demo</title>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

<!-- Demo styles -->

Salin selepas log masuk

<style>

Salin selepas log masuk

html, body {

Salin selepas log masuk

position: relative;

Salin selepas log masuk

height: 100%;

Salin selepas log masuk

body {

Salin selepas log masuk

background: #eee;

Salin selepas log masuk

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

Salin selepas log masuk

font-size: 14px;

Salin selepas log masuk

color:#000;

Salin selepas log masuk

margin: 0;

Salin selepas log masuk

padding: 0;

Salin selepas log masuk

.swiper-container {

Salin selepas log masuk

width: 100%;

Salin selepas log masuk

height: 100%;

Salin selepas log masuk

.swiper-slide {

Salin selepas log masuk

text-align: center;

Salin selepas log masuk

font-size: 18px;

Salin selepas log masuk

background: #fff;

Salin selepas log masuk

/* Center slide text vertically */

Salin selepas log masuk

display: -webkit-box;

Salin selepas log masuk

display: -ms-flexbox;

Salin selepas log masuk

display: -webkit-flex;

Salin selepas log masuk

display: flex;

Salin selepas log masuk

-webkit-box-pack: center;

Salin selepas log masuk

-ms-flex-pack: center;

Salin selepas log masuk

-webkit-justify-content: center;

Salin selepas log masuk

justify-content: center;

Salin selepas log masuk

-webkit-box-align: center;

Salin selepas log masuk

-ms-flex-align: center;

Salin selepas log masuk

-webkit-align-items: center;

Salin selepas log masuk

align-items: center;

Salin selepas log masuk

</style>

Salin selepas log masuk

</head>

Salin selepas log masuk

<body>

Salin selepas log masuk

<!-- Swiper -->

Salin selepas log masuk

<p class="swiper-container">

Salin selepas log masuk

<p class="swiper-wrapper">

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

</p>

Salin selepas log masuk

<!-- Add Pagination -->

Salin selepas log masuk

</p>

Salin selepas log masuk

</p>

Salin selepas log masuk

<!-- Swiper JS -->

Salin selepas log masuk

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

Salin selepas log masuk

<!-- Initialize Swiper -->

Salin selepas log masuk

<script>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

paginationClickable: true

Salin selepas log masuk

});

Salin selepas log masuk

</script>

Salin selepas log masuk

</body>

Salin selepas log masuk

</html>

Salin selepas log masuk

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

Atas ialah kandungan terperinci Swiper轮播图源码分享解析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!