jQuery 플러그인 Slick은 반응형 모바일 슬라이드쇼 이미지 전환 효과를 구현합니다._jquery

jQuery 기반의 jQuery 반응형 모바일 슬라이드쇼 이미지 전환 특수 효과 플러그인 Slick은 매우 강력하며 왼쪽 및 오른쪽 버튼 전환, 도트 전환, 사용자 정의 전환 번호, 사용자 정의 전환 속도 및 이미지 사전 설정을 지원합니다. 로드 및 자동 재생 지원 정의, 효과가 매우 좋고, 많은 매개변수 사용자 정의가 지원됩니다. 가능하다고 생각되면 해당 매개변수 구성을 참조할 수 있으며, 여전히 배우고 사용할 가치가 있습니다.

사용법:

1. 플러그인 및 jQuery 로드

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script type="text/javascript" src="slick/slick.js"></script> 
<link rel="stylesheet" type="text/css" href="slick/slick.css"/> 

2.HTML 콘텐츠

<div class="slider fade"> 
<div><div class="image"><img src="img/fonz1.png"/></div></div> 
<div><div class="image"><img src="img/fonz2.png"/></div></div> 
<div><div class="image"><img src="img/fonz3.png"/></div></div> 
</div> 

3. 함수 호출

<script type="text/javascript"> 
$(document).ready(function() { 
  $('.fade').slick({ 
    dots: true, 
    infinite: true, 
    speed: 500, 
    fade: true, 
    slide: 'div', 
    cssEase: 'linear' 
  }); 
}); 
</script> 

데모 보기 지금 다운로드

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