简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

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

巴扎黑
풀어 주다： 2018-05-28 17:04:48
원래의
4593명이 탐색했습니다.

오늘은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
swiper
원천：php.cn
이전 기사：CSS3 반사 예제 튜토리얼 다음 기사：HTML5+CSS3 정적 페이지 프로젝트 경험 요약
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Vue.js를 사용하여 Swiper에서 슬라이드 탐색용 사용자 정의 버튼 만들기 기본 탐색(nextEl, prevEl)을 제거하고 "다음 슬라이드 버튼"이라는 텍스트가 있는 버튼을 다음 슬라이드로 스크롤해야 합니다. <...
에서 2023-11-02 14:42:51
0
1
174
내 라이브러리 패키지에 노드 모듈을 포함해야 합니까? 저는 React 컴포넌트 라이브러리를 개발 중입니다. 이 라이브러리는 여러 내부 NextJ 프로젝트에서 사용됩니다. NextJ와의 호환성 이유로 인해 이 라이브러...
에서 2023-09-12 19:36:43
0
1
268
Jest로 Swiper 테스트하기 swiper/react를 사용하는 구성 요소가 있습니다. 테스트 사례를 작성하는 동안 onSlideChange에서 얻은 스와이프 이벤트를 시뮬레이션할 수 없습니다...
에서 2023-08-31 22:35:14
0
1
306
Swiper 튜토리얼: 움직이는 화살표를 제어하는 ​​방법은 무엇입니까? 이것은 내 캐러셀인데 스와이프 버튼을 구성하려고 할 때 화살표가 이미지에서 멀리 떨어져 있습니다. 화살표를 더 가깝게 만드는 방법(위치 수정)이 있습니까? 효과=...
에서 2023-08-16 14:46:49
0
1
331
React JS Swiper 루프가 객체를 올바르게 탐색하지 못하는 문제 내 Swiper가 React에서 작동하지 않고 여러 번 수정을 시도했지만 성공하지 못했습니다. Swiper는 이미 최신 버전입니다. importReactfrom&...
에서 2023-08-15 22:44:32
0
1
297
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！