Swiper轮播图源码分享解析

巴扎黑

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

asal

4594 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!

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

Swiper轮播图源码分享解析

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

超级简单的: