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

php中世界最好的语言
풀어 주다: 2018-05-28 15:46:52
원래의
2215명이 탐색했습니다.

이번에는 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)

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

추천 도서:

웹팩+react 개발 환경 구축 방법


React 패밀리 버킷 환경 구축 방법

위 내용은 Swiper 4.x의 모바일 단말 컨텐츠 기반 터치 및 슬라이드 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿