>  기사  >  웹 프론트엔드  >  스와이퍼를 사용하여 슬라이딩 콘텐츠를 변경하는 방법(자세한 튜토리얼)

스와이퍼를 사용하여 슬라이딩 콘텐츠를 변경하는 방법(자세한 튜토리얼)

亚连
亚连원래의
2018-06-11 16:08:092564검색

현재 디스플레이가 1이라고 가정하고, 하나를 왼쪽으로 밀면 1씩 감소하고, 오른쪽으로 밀면 1씩 증가합니다. 다음은 슬라이딩 내용을 동적으로 변경하는 스와이프 구현 방법을 설명하는 예제 코드입니다. 관심있는 친구들은 함께 살펴보실 수 있습니다. 현재 표시가 1이라고 가정하고, 왼쪽으로 슬라이드하면 1씩 감소하고, 오른쪽으로 슬라이드하면 됩니다. 1씩 늘리려면

본문 아래에 다음 코드 추가

<p class="swiper-container temp">
 <p class="swiper-wrapper">
  <p class="swiper-slide">
   1
  </p>
  <p class="swiper-slide">
   2
  </p>
  <p class="swiper-slide">
   3
  </p>
 </p>
</p>

swiper의 css 및 js 스크립트 참조(현재 버전 4.x 이상 사용)

js 스크립트 추가

var now_ActiveIndex=2;//,//当前所在下标
var tempSwiper = new Swiper(&#39;.swiper-container.temp&#39;, {
 initialSlide: 1,
 loop:true,
 speed:400,
 on: {
  slideChange: function(swiper){//当当前Slide切换时执行(activeIndex发生改变)
   var pre_number=Number($(this.slides[now_ActiveIndex]).text());
   if(now_ActiveIndex>this.activeIndex){
    if(now_ActiveIndex==4&&this.activeIndex==1){
     $(this.slides[this.activeIndex]).text(pre_number);
    }else{//上一个
     var act_number=pre_number-1;
     $(this.slides[this.activeIndex]).text(act_number);
    }
   }else if(now_ActiveIndex<this.activeIndex){
    if(now_ActiveIndex==0&&this.activeIndex==3){
     $(this.slides[this.activeIndex]).text(pre_number);
    }else{//下一个
     var act_number=pre_number+1;
     $(this.slides[this.activeIndex]).text(act_number);
    }
   }
   now_ActiveIndex=this.activeIndex;
  },
 },
})
초기값:

왼쪽으로 세 번 스와이프:

오른쪽으로 한 번 스와이프

이 테스트를 하는 주요 목적은 달력을 좌우로 슬라이드하여 이전 달과 다음 달을 변경하는 것입니다

위 내용은 다음과 같습니다. 모든 사람을 위해 정리했습니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련글:

vue에서 페이지 점프 후 원래 페이지의 초기 위치로 돌아가는 방법

vue-router를 사용하여 각 페이지의 제목 방법을 설정하는 방법

문제 해결 방법 of Vue.js 표시 데이터 페이지가 깜박일 때

ajax 요청 + vue.js 렌더링 + 페이지 로딩

ajax를 사용하여 vue.js에서 페이지를 렌더링하는 방법

위 내용은 스와이퍼를 사용하여 슬라이딩 콘텐츠를 변경하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.