jQuery 플러그인 Slider Revolution은 반응형 애니메이션 슬라이딩 그림 전환 효과를 구현합니다.

이 플러그인은 jQuery를 기반으로 하며, 완벽하게 반응하고, 모바일 장치를 지원하고, 키보드 페이지 넘기기를 지원하며, 슬라이드쇼와 비디오 재생 타이머가 내장되어 있습니다. 자동 정의, 자동 응답, 전체 화면 등 다양한 모드가 있습니다. 다양한 애니메이션 효과, 3D 효과 등이 있습니다. 간단히 말해서, 여러분이 생각하는 모든 효과를 수행할 수 있으며 그 이름은 Slider Revolution입니다.

HTML

Slider Revolution은 jQuery 기반 플러그인입니다. 사용 시 먼저 jQuery 라이브러리 파일을 로드해야 하며, Slider Revolution이 의존하는 css 및 js 파일도 로드해야 합니다.

<script src="js/jquery.js"></script> 
<link rel="stylesheet" href="css/style.css" media="screen" /> 
<script src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script> 
<script src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script> 

콘텐츠 전환의 주요 HTML 구조는 다음과 같습니다. div.tp-banner에는 여러 개의

태그가 포함되어 있으며, 전환 콘텐츠는 기본 이미지, 텍스트, 버튼 정보를 포함하여

에 배치됩니다. 이 정보는 Slider Revolution에서 인식하기 위해 해당 데이터 속성과 쌍을 이룹니다.

<div class="tp-banner-container"> 
 <div class="tp-banner" > 
  <ul> 
   <!-- SLIDE --> 
   <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" > 
    <!-- MAIN IMAGE --> 
    <img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"> 
    <!-- LAYERS --> 
    <!-- LAYER NR. 1 --> 
    <div class="tp-caption lightgrey_divider skewfromrightshort fadeout" 
     data-x="85" 
     data-y="224" 
     data-speed="500" 
     data-start="1200" 
     data-easing="Power4.easeOut">My Caption 
    </div> 
    ... 
 
   </li> 
   <li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" > 
    <!-- MAIN IMAGE --> 
    <img src="images/bg2.jpg" alt="darkblurbg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"> 
    <!-- LAYERS --> 
    <!-- LAYER NR. 1 --> 
    <div class="tp-caption lightgrey_divider skewfromrightshort fadeout" 
     data-x="85" 
     data-y="224" 
     data-speed="500" 
     data-start="1200" 
     data-easing="Power4.easeOut">My Caption 
    </div> 
    ... 
   </li> 
   .... 
  </ul> 
 </div> 
</div> 

jQuery 호출

HTML 구조가 정리된 후 Slider Revolution 플러그인을 호출하면 위의 코드를 붙여넣은 후 브라우저를 열면 전환 효과를 볼 수 있습니다.

 
$(function() { 
 $('.tp-banner').revolution({ 
  delay:9000, 
  startwidth:1170, 
  startheight:500, 
  hideThumbs:10 
 }); 
}); 

옵션 설정 및 설명

Slider Revolution은 다양한 매개변수 옵션 설정을 제공합니다.
지연: 슬라이딩 콘텐츠의 체류 시간입니다. 기본값 9000밀리초
startheight: 슬라이딩 콘텐츠 높이, 기본값은 490픽셀입니다.
startwidth: 슬라이딩 콘텐츠 너비, 기본값은 890픽셀입니다.
NavigationType: 페이지 넘기기 아이콘을 표시합니다. 기본값은 "글머리 기호"(점)입니다. "없음"으로 설정하면 표시되지 않습니다. .
NavigationArrows: 페이지 넘기기 화살표를 표시합니다. 기본값은 nexttobullets입니다. 즉, 마우스 슬라이드 시 왼쪽 및 오른쪽 페이지 넘기기 화살표가 표시되지 않습니다.
touchenabled: 터치 슬라이딩 허용 여부. 기본값은 on이며, off로 설정하면 허용되지 않습니다.
onHoverStop: 마우스가 슬라이드할 때 일시 정지를 활성화할지 여부입니다. on: on, off: off.
fullWidth: 이미지 콘텐츠의 전체 화면 표시 활성화 여부, 켜짐: 켜짐, 꺼짐: 꺼짐.

각

태그에 다양한 효과를 설정할 수 있습니다.
데이터 전환: 콘텐츠 슬라이딩 효과, 다음 값을 설정할 수 있습니다: boxslide, boxfade, Slotzoom-horizontal, Slotslide-horizontal, Slotfade-horizontal, Slotzoom-vertical, Slotslide-vertical, Slotfade-vertical, 커튼-1, 커튼-2 , 커튼 -3, 슬라이드왼쪽, 슬라이드오른쪽, 슬라이드업, 슬라이드다운, 페이드
data-slotamount: 전환시 분할되는 정사각형 블록의 수.
데이터링크: 이미지 링크
data-delay: 현재 슬라이더 콘텐츠의 체류 시간을 설정합니다

li의 각 요소에 대해 다음 옵션을 설정하여 다양한 효과를 얻을 수 있습니다.
애니메이션 스타일, 클래스 속성: class 속성 값은 다양한 애니메이션 스타일을 나타냅니다. sft - 위에서부터 짧게, sfb - 아래에서 짧게, sfr - 오른쪽에서 짧게, sfl - 왼쪽에서 짧게, lft - 위에서 길게, lfb - 아래에서 길게 , lfr - 오른쪽에서 길게, lfl - 왼쪽에서 길게, 페이드 - 페이딩
data-x: li를 ​​기준으로 현재 요소의 수평 변위
data-y: li를 ​​기준으로 한 현재 요소의 수직 변위
데이터 속도: 애니메이션 시간, 밀리초
data-start after: 현재 요소가 표시되기 전에 몇 초간 기다립니다.
data-easing: easyOutBack을 포함한 버퍼 애니메이션... 다양한 애니메이션 효과는 jQuery Easing 애니메이션 효과 확장

을 참조하세요.

또한 타임라인을 타이머로 추가하려면 슬라이딩 콘텐츠 끝에 다음 코드를 추가하면 됩니다.

 
<div class="tp-bannertimer"></div> 

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.