Rumah > Artikel > hujung hadapan web > Swiper轮播图源码分享解析

Swiper轮播图源码分享解析

巴扎黑asal: 2018-05-28 17:04:484664semak imbas

今天咱们来说一下.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>

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：CSS3倒影实例教程Artikel seterusnya：HTML5+CSS3静态页面项目经验总结

Artikel berkaitan

Lihat lagi