Swiper 4.x의 모바일 단말 컨텐츠 기반 터치 및 슬라이드 기능 구현-JS 튜토리얼-php.cn

Swiper 4.x의 모바일 단말 컨텐츠 기반 터치 및 슬라이드 기능 구현

php中世界最好的语言

풀어 주다： 2018-05-28 15:46:52

원래의

2202명이 탐색했습니다.

이번에는 Swiper 4의 콘텐츠를 기반으로 터치 및 슬라이드 기능 구현을 가져왔습니다. 일어나서 살펴보세요. Swiper는

javascript

로만 제작된 슬라이딩 특수 효과 플러그인으로, 휴대폰, 태블릿 및 기타 모바일 단말기를 대상으로 합니다. Swiper는 터치스크린 초점 이미지, 터치스크린 탭 전환, 터치스크린 다중 이미지 전환 등과 같은 일반적인 효과를 얻을 수 있습니다.

Swiper는 무료이고 안정적이며 사용하기 쉽고 강력한 오픈 소스입니다. 모바일 터미널 웹사이트를 구축하는 데 중요한 선택입니다!

1. 먼저 플러그인을 로드하세요. 필요한 파일은 swiper.min.js 및 swiper.min.css 파일입니다. Swiper 파일을 다운로드하거나 CDN을 사용할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  ...
  <link rel="stylesheet" href="path/to/swiper.min.css" rel="external nofollow" >
</head>
<body>
  ...
  <script src="path/to/swiper.min.js"></script>
</body>
</html>

로그인 후 복사

2.HTML 콘텐츠.

<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>
  <!-- 如果需要分页器 -->
  <p class="swiper-pagination"></p>
  
  <!-- 如果需要导航按钮 -->
  <p class="swiper-button-prev"></p>
  <p class="swiper-button-next"></p>
  
  <!-- 如果需要滚动条 -->
  <p class="swiper-scrollbar"></p>
</p>
导航等组件可以放在container之外

로그인 후 복사

3. Swiper의 크기를 정의하고 싶을 수도 있지만 물론 그렇지 않습니다.

.swiper-container {
  width: 600px;
  height: 300px;
}

로그인 후 복사

4. Swiper 초기화: 태그 옆에 두는 것이 가장 좋습니다.

<script>    
 var mySwiper = new Swiper ('.swiper-container', {
  direction: 'vertical',
  loop: true,
  
  // 如果需要分页器
  pagination: {
   el: '.swiper-pagination',
  },
  
  // 如果需要前进后退按钮
  navigation: {
   nextEl: '.swiper-button-next',
   prevEl: '.swiper-button-prev',
  },
  
  // 如果需要滚动条
  scrollbar: {
   el: '.swiper-scrollbar',
  },
 })    
 </script>
</body>

로그인 후 복사

HTML 콘텐츠 뒤에 쓸 수 없는 경우 페이지가 로드된 후 초기화해야 합니다(권장하지 않음). .

<script type="text/javascript">
window.onload = function() {
 ...
}
</script>

로그인 후 복사

또는 이와 같습니다(

Jquery

및 Zepto)

<script type="text/javascript">
$(document).ready(function () {
 ...
})
</script>

로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

Swiper 4.x의 모바일 단말 컨텐츠 기반 터치 및 슬라이드 기능 구현