Swiper carousel image source code sharing analysis

巴扎黑

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

Original

4684 people have browsed it

Today let’s talk about the Swiper carousel.

Super simple:

Cuihua, the code: </p>

<br>

Copy after login

<!DOCTYPE html>

Copy after login

<html lang="en">

Copy after login

<head>

Copy after login

<meta charset="utf-8">

Copy after login

<title>Swiper demo</title>

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

<!-- Demo styles -->

Copy after login

<style>

Copy after login

html, body {

Copy after login

position: relative;

Copy after login

height: 100%;

Copy after login

body {

Copy after login

background: #eee;

Copy after login

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

Copy after login

font-size: 14px;

Copy after login

color:#000;

Copy after login

margin: 0;

Copy after login

padding: 0;

Copy after login

.swiper-container {

Copy after login

width: 100%;

Copy after login

height: 100%;

Copy after login

.swiper-slide {

Copy after login

text-align: center;

Copy after login

font-size: 18px;

Copy after login

background: #fff;

Copy after login

/* Center slide text vertically */

Copy after login

display: -webkit-box;

Copy after login

display: -ms-flexbox;

Copy after login

display: -webkit-flex;

Copy after login

display: flex;

Copy after login

-webkit-box-pack: center;

Copy after login

-ms-flex-pack: center;

Copy after login

-webkit-justify-content: center;

Copy after login

justify-content: center;

Copy after login

-webkit-box-align: center;

Copy after login

-ms-flex-align: center;

Copy after login

-webkit-align-items: center;

Copy after login

align-items: center;

Copy after login

</style>

Copy after login

</head>

Copy after login

<body>

Copy after login

<!-- Swiper -->

Copy after login

<p class="swiper-container">

Copy after login

<p class="swiper-wrapper">

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

</p>

Copy after login

<!-- Add Pagination -->

Copy after login

</p>

Copy after login

</p>

Copy after login

<!-- Swiper JS -->

Copy after login

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

Copy after login

<!-- Initialize Swiper -->

Copy after login

<script>

Copy after login

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

Copy after login

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

Copy after login

paginationClickable: true

Copy after login

});

Copy after login

</script>

Copy after login

</body>

Copy after login

</html>

Copy after login

rrreeerrreee

Finally, don’t forget to type these again You need to import Swiper.css and Swiper.js plug-ins before doing anything!</p>

The above is the detailed content of Swiper carousel image source code sharing analysis. For more information, please follow other related articles on the PHP Chinese website!