Analyse du partage de code source d'image du carrousel Swiper

巴扎黑

Libérer： 2018-05-28 17:04:48

original

4736 Les gens l'ont consulté

Aujourd'hui, parlons de l'image du carrousel Swiper

Super simple :

Cuihua, le code : </p>

<br>

Copier après la connexion

<!DOCTYPE html>

Copier après la connexion

<html lang="en">

Copier après la connexion

<head>

Copier après la connexion

<meta charset="utf-8">

Copier après la connexion

<title>Swiper demo</title>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

<!-- Demo styles -->

Copier après la connexion

<style>

Copier après la connexion

html, body {

Copier après la connexion

position: relative;

Copier après la connexion

height: 100%;

Copier après la connexion

body {

Copier après la connexion

background: #eee;

Copier après la connexion

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

Copier après la connexion

font-size: 14px;

Copier après la connexion

color:#000;

Copier après la connexion

margin: 0;

Copier après la connexion

padding: 0;

Copier après la connexion

.swiper-container {

Copier après la connexion

width: 100%;

Copier après la connexion

height: 100%;

Copier après la connexion

.swiper-slide {

Copier après la connexion

text-align: center;

Copier après la connexion

font-size: 18px;

Copier après la connexion

background: #fff;

Copier après la connexion

/* Center slide text vertically */

Copier après la connexion

display: -webkit-box;

Copier après la connexion

display: -ms-flexbox;

Copier après la connexion

display: -webkit-flex;

Copier après la connexion

display: flex;

Copier après la connexion

-webkit-box-pack: center;

Copier après la connexion

-ms-flex-pack: center;

Copier après la connexion

-webkit-justify-content: center;

Copier après la connexion

justify-content: center;

Copier après la connexion

-webkit-box-align: center;

Copier après la connexion

-ms-flex-align: center;

Copier après la connexion

-webkit-align-items: center;

Copier après la connexion

align-items: center;

Copier après la connexion

</style>

Copier après la connexion

</head>

Copier après la connexion

<body>

Copier après la connexion

<!-- Swiper -->

Copier après la connexion

<p class="swiper-container">

Copier après la connexion

<p class="swiper-wrapper">

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

</p>

Copier après la connexion

<!-- Add Pagination -->

Copier après la connexion

</p>

Copier après la connexion

</p>

Copier après la connexion

<!-- Swiper JS -->

Copier après la connexion

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

Copier après la connexion

<!-- Initialize Swiper -->

Copier après la connexion

<script>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

paginationClickable: true

Copier après la connexion

});

Copier après la connexion

</script>

Copier après la connexion

</body>

Copier après la connexion

</html>

Copier après la connexion

Enfin, n'oubliez pas d'importer les plug-ins Swiper.css et Swiper.js avant de taper ces choses !</p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!