jQuery 플러그인 Skippr는 포커스 차트 슬라이드 효과를 구현합니다._jquery

역사상 최고의 포커스 차트 슬라이드쇼용 jQuery 플러그인, Skippr, 경량 플러그인, 반응형 레이아웃 플러그인 및 강력한 매개변수 사용자 정의

구성에서는 전환 속도, 전환 방법, 왼쪽 및 오른쪽 화살표 표시 여부, 자동 재생 여부, 자동 재생 간격 및 기타 구성을 사용자 정의할 수 있습니다

매개변수, 호출 플러그인도 매우 간단하고 사용하기 쉽습니다. 호출 방법은 다음과 같습니다.

1. jQuery 및 플러그인 로드

<link rel="stylesheet" href="css/jquery.skippr.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.skippr.min.js"></script>

2.HTML 콘텐츠

<div id="container"> 
    <div id="theTarget"> 
    <div style="background-image: url(img/image1.jpg)"></div> 
    <div style="background-image: url(img/image2.jpg)"></div> 
    <div style="background-image: url(img/image3.jpg)"></div> 
    <div style="background-image: url(img/image4.jpg)"></div> 
   <div style="background-image: url(img/image5.jpg)"></div> 
  </div>   
</div> 

3. 함수 호출

<script> 
 $(document).ready(function(){ 
 
     $("#theTarget").skippr({ 
 
      transition: 'slide', 
      speed: 1000, 
      easing: 'easeOutQuart', 
      navType: 'block', 
      childrenElementType: 'div', 
      arrows: true, 
      autoPlay: false, 
      autoPlayDuration: 5000, 
      keyboardOnAlways: true, 
      hidePrevious: false 
    });       
 
  }); 
</script> 

파라미터 구성 설명

전환: (페이드/슬라이드) 전환 방법

속도: 전환 속도(밀리초)

easing: 전환 효과(easeOutQuart)

navType: 아래 탐색 유형(블록/버블)

화살표: 화살표 유무(true/false)

autoPlay: 자동 재생 여부(true/false)

autoPlayDuration: 자동 재생 간격(밀리초)

keyboardOnAlways: 키보드 전환 지원 여부(true/false)

hidePrevious: 첫 번째 전환 화살표를 숨길지 여부(true/false)

데모 보기 스크립트 다운로드

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