집 >웹 프론트엔드 >JS 튜토리얼 >Swiper 4.x의 모바일 단말 컨텐츠 기반 터치 및 슬라이드 기능 구현

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

php中世界最好的语言원래의: 2018-05-28 15:46:522255검색

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!