swiper animate
6311 단어 학습 노트
1、swiper를 불러와야 합니다.aniamte.min.js 및 animate.min.css.
2. swiper를 초기화합니다.
var mySwiper = new Swiper ('.swiper-container', {
direction : "vertical",
mousewheelControl : false,
effect : "fade",
noSwiping : true,
onInit: function(swiper){ //Swiper2.x onFirstInit
swiperAnimateCache(swiper); //
swiperAnimate(swiper); //
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); // slide slide
}
})
</script>3. 애니메이션을 추가할 요소에 클래스 이름 ani를 추가합니다.
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"> </p>
</div>swiper-animate-effect: 전환 효과, 예를 들어fadeInUp swiper-animate-duration: 옵션, 애니메이션 지속 시간(단위 초), 예를 들어 0.5s swiper-animate-delay: 옵션, 애니메이션 지연 시간(단위 초), 예를 들어 0.3s
swiper에서 자주 사용하는 다른 방법
API 문서 1, noSwing(전환 금지)을true로 설정하면 슬라이드에'swiper-no-swiping'클래스를 추가하여 슬라이드를 드래그할 수 없습니다.이 클래스 이름은 noSwipingClass를 통해 수정할 수 있습니다.
인스턴스 사용:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
slider1div>
<div class="swiper-slide stop-swiping">
slider2div>
<div class="swiper-slide">
slider3div>
div>
div>
<script>
var mySwiper = new Swiper('.swiper-container',{
noSwiping : true,
noSwipingClass : 'stop-swiping',// swiper
})
script>사용 상황: 제작된 h5는 사용자가 일정한 상호작용을 해야만 다음 페이지로 전환할 수 있다. 예를 들어 선택 문제가 특정한 답안으로 선택된 후에 다음 페이지로 미끄러진다.(타이머를 추가하여 페이지 전환을 지연시킬 수 있습니다.)
2、mySwiper.slidePrev();(이전 페이지로 미끄러짐);mySwiper.slideNext();(다음 페이지로 이동)
<script>
var mySwiper = new Swiper('.swiper-container',{
})
$('#btn1').click(function(){
mySwiper.slidePrev();
})
$('#btn2').click(function(){
mySwiper.slideNext();
})
script>3、mySwiper.slideTo();(지정된 시트로 이동)
<script>
var mySwiper = new Swiper('.swiper-container',{
})
$('#btn').click(function(){
mySwiper.slideTo(0, 1000, false);// slide， 1
})
script>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
STL 학습노트(6) 함수 객체모방 함수는 모두pass-by-value이다 함수 대상은 값에 따라 전달되고 값에 따라 되돌아오기 때문에 함수 대상은 가능한 한 작아야 한다(대상 복사 비용이 크다) 함수 f와 대상 x, x 대상에서 f를 호출하면:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
