Swiper 캐러셀 이미지 소스코드 공유 분석

巴扎黑

풀어 주다： 2018-05-28 17:04:48

원래의

4690명이 탐색했습니다.

오늘은 Swiper 캐러셀 이미지에 대해 이야기해 보겠습니다.

아주 간단합니다:

Cuihua, 코드:

<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">

로그인 후 복사

rrree

마지막으로 이러한 내용을 입력하기 전에 Swiper.css 및 Swiper.js 플러그인을 가져오는 것을 잊지 마세요.

위 내용은 Swiper 캐러셀 이미지 소스코드 공유 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!