순수 자바스크립트 모바일 우선 슬라이드쇼 effect

순수 자바스크립트 모바일 우선 슬라이드쇼 effect_javascript 기술

WBOY

풀어 주다： 2016-05-16 15:34:09

원래의

1573명이 탐색했습니다.

간단한 튜토리얼
wallop은 모바일 최초의 순수 JavaScript 슬라이드쇼 플러그인입니다. 이 슬라이드쇼 플러그인은 크기가 4K에 불과합니다. HTML 요소에 대한 적절한 클래스를 추가하고 제거하여 이러한 클래스 스타일을 완전히 사용자 정의할 수 있습니다. 기능은 다음과 같습니다:
모바일 우선
애니메이션 및 전환 효과는 CSS를 사용하여 생성됩니다
가볍고, 4K 사이즈만 가능
유연성과 확장성이 뛰어납니다
맞춤형 이벤트 및 API
외부 종속성 없음

사용방법
이 슬라이드쇼 플러그인을 사용하려면 먼저 wallop.css 및 Wallop.min.js 파일을 도입해야 합니다.

<link rel="stylesheet" href="path/to/wallop.css">
<script src="path/to/Wallop.min.js"></script>

로그인 후 복사

HTML 구조

이 슬라이드의 기본 HTML 구조는 다음과 같습니다. 첫 번째 슬라이드에 .Wallop-item--current 클래스를 추가할 수 있습니다.

<div class="Wallop">
 <div class="Wallop-list">
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
 </div>
 <button class="Wallop-buttonPrevious">Previous</button>
 <button class="Wallop-buttonNext">Next</button>
</div>

로그인 후 복사

초기화 플러그인

<script>
 var wallopEl = document.querySelector('.Wallop');
 var slider = new Wallop(wallopEl);
</script>

로그인 후 복사

애니메이션 효과 추가

이 슬라이드쇼 플러그인에는 기본적으로 애니메이션 전환 효과가 없습니다. 애니메이션 효과를 추가해야 하는 경우 해당 wallop-animation.css 파일을 도입하고 요소에 Wallop--xxxx 클래스를 추가해야 합니다. 예를 들어 페이드 효과를 추가하려면:

<head>
 <link rel="stylesheet" href="path/to/wallop.css">
 <link rel="stylesheet" href="path/to/wallop-fade.css">
</head>        
<div class="Wallop Wallop--fade">
...
</div>

로그인 후 복사

사용 가능한 애니메이션 유형

이 슬라이드에 사용할 수 있는 전환 애니메이션 유형은 다음과 같습니다.
왈롭-슬라이드
Wallop-페이드
Wallop-규모
왈롭--회전
왈롭-접기
Wallop--수직 슬라이드
위는 내장된 전환 애니메이션 유형 중 일부이며, 자신만의 전환 애니메이션을 사용자 정의할 수도 있습니다.
구성 매개변수
사용 가능한 구성 매개변수는 다음과 같습니다.
ButtonPreviousClass: 'Wallop-buttonPrevious'
버튼NextClass: 'Wallop-buttonNext'
itemClass: 'Wallop-item'
currentItemClass: 'Wallop-item--current'
showPreviousClass: 'Wallop-item--showPrevious'
showNextClass: 'Wallop-item--showNext'
hidePreviousClass: 'Wallop-item--hidePrevious'
hideNextClass: 'Wallop-item--hideNext'
캐러셀: 사실
방법
Wallop 슬라이드쇼 플러그인은 버튼 제어를 위한 몇 가지 기본 방법을 제공합니다.
이동

지정된 인덱스의 슬라이드로 점프할 수 있습니다.

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到第二个slide（index从0开始）
Wallop.goTo(1);

로그인 후 복사

다음 슬라이드로 이동하세요.

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到下一个slide
Wallop.next();

로그인 후 복사

이전 슬라이드로 이동합니다.

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到前一个slide
Wallop.previous();

로그인 후 복사

이벤트
Wallop은 슬라이드가 바뀔 때마다 이벤트를 발생시키며, 현재 슬라이드의 인덱스와 Wallop 객체가 포함된 세부 객체를 반환합니다.

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
Wallop.on('change', function(event) {
 // event.detail.wallopEl
 // => <div class="Wallop">…</div>
 
 // event.detail.currentItemIndex
 // => number
});

로그인 후 복사

위 내용은 여러분에게 공유된 순수 JavaScript 모바일 우선 슬라이드쇼 효과 생성 과정입니다. 더 아름다운 슬라이드쇼 효과를 만드는 데 도움이 되기를 바랍니다.