워크식스 제이쿼리

slidebanner.js

자동 또는 수동으로 동작 가능한 이미지슬라이드를 구현하게 해주는 플러그인

샘플영상

다운로드

slidebanner.js 다운로드

설치/사용법

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/slidebanner.js"></script>

<style>
#banner1{width:900px; height:300px; overflow:hidden;}
#banner1 .page{top:5px; right:5px;}
#banner1 .arrowleft{top:150px; left:10px; color:#fff;}
#banner1 .arrowright{top:150px; right:10px; color:#fff;}
</style>

<script>

   $(function(){
       $('#banner1').slidebanner({
           page:true,
           arrow:{left:'◀',right:'▶'},
           auto:true,
           speed:3000,
           delay:3000
       });
   });

</script>

<div id="banner1">
   <div class="container">
       <div><a href="#"></a></div>
       <div><a href="#"></a></div>
       <div><a href="#"></a></div>
       <div><a href="#"></a></div>
   </div>
</div>

1. 제이쿼리 설치가 필요 합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/slidebanner.js"></script>

<style>
#banner1{width:900px; height:300px; overflow:hidden;}
#banner1 .page{top:5px; right:5px;}
#banner1 .arrowleft{top:150px; left:10px; color:#fff;}
#banner1 .arrowright{top:150px; right:10px; color:#fff;}
</style>

<script>

   $(function(){
       $('#banner1').slidebanner({
           page:true,
           arrow:{left:'◀',right:'▶'},
           auto:true,
           speed:3000,
           delay:3000
       });
   });

</script>

<div id="banner1">
   <div class="container">
       <div><a href="#"></a></div>
       <div><a href="#"></a></div>
       <div><a href="#"></a></div>
       <div><a href="#"></a></div>
   </div>
</div>

2. 다운로드 받은 플러그인을 설치 합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/slidebanner.js"></script>

<style>
#banner1{width:900px; height:300px; overflow:hidden;}
#banner1 .page{top:5px; right:5px;}
#banner1 .arrowleft{top:150px; left:10px; color:#fff;}
#banner1 .arrowright{top:150px; right:10px; color:#fff;}
</style>

<script>

   $(function(){
       $('#banner1').slidebanner({
           page:true,
           arrow:{left:'◀',right:'▶'},
           auto:true,
           speed:3000,
           delay:3000
       });
   });

</script>

<div id="banner1">
   <div class="container">
       <div><a href="#"></a></div>
       <div><a href="#"></a></div>
       <div><a href="#"></a></div>
       <div><a href="#"></a></div>
   </div>
</div>

3. 배너 레이아웃 및 스타일을 작성 합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/slidebanner.js"></script>

<style>
#banner1{width:900px; height:300px; overflow:hidden;}
#banner1 .page{top:5px; right:5px;}
#banner1 .arrowleft{top:150px; left:10px; color:#fff;}
#banner1 .arrowright{top:150px; right:10px; color:#fff;}
</style>

<script>

   $(function(){
       $('#banner1').slidebanner({
           page:true,
           arrow:{left:'◀',right:'▶'},
           auto:true,
           speed:3000,
           delay:3000
       });
   });

</script>

<div id="banner1">
   <div class="container">
       <div><a href="#"></a></div>
       <div><a href="#"></a></div>
       <div><a href="#"></a></div>
       <div><a href="#"></a></div>
   </div>
</div>

4. 페이지가 열릴때 플러그인 자동으로 실행될 수 있도록 함수를 작성 합니다.

$(function(){
       $('#banner1').slidebanner({
           page:true, //페이지를 사용여부 설정
           arrow:{left:'◀',right:'▶'}, //좌우 이동 사용 여부 및 버튼 모양 설정
           auto:true, //배너를 자동으로 동작 여부 설정
           speed:3000, //배너 변경시 속도 설정
           delay:3000,   //배너가 멈추어 있는 시간 설정

pagecolor:'#eeeeee', //전체 페이지의 색
pageoncolor:'#3af939' //현재 배너를 나타내는 페이지의 색
});
});

5. 옵션을 설정 합니다.

! 플러그인 설치 및 수정은 견적문의 해주세요.