2016/08/02 - [Jquery] - slidebanner.js 플러그인 - 슬라이드 배너 플러그인
요즘 다른건 다 제쳐두고 제이쿼리 플러그인만 주구장창 만드네요.
php 클래스도 만들고 솔루션도 만들고 다른것도 해야하는데.....
아무튼 오늘은 가장 많이 사용되는 배너 형태인 슬라이드를 제이쿼리(jquery) 플러그인으로 만들어봤어요.
슬라이드 제이쿼리(jquery) 플러그인은 너무나도 유명한 플러그인들이 많은데요.
해외 플러그인들은 쓰려면 받아다가 조금씩 수정해야 하는데 영어로 되어 있어서 난감할꺼에요.
특히나 디자이너인데 퍼블리싱까지 같이 하시는분이라면 더욱더요.
그래서 국산!!! 제이쿼리(jquery) 플러그인을 만들어서 배포해요.
영상에서 보신거와 같이 페이지와 화살표 동작도 가능하고요.
자동, 수동, 페이지 컬러,페이지유무,화살표이미지,화살표유무,이동속도,지연속도를 설정할수 있어요.
슬라이드 제이쿼리(jquery) 플러그인은 홈페이지에서 공유하는데요.
일단 사용법을 아셔야 하니까.
예제를 통해서 알려드릴게요.
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="slidebanner.js"></script>
<script>
$(function(){
$('#banner1').slidebanner({
page:true,
arrow:{left:'◀',right:'▶'},
auto:true,
speed:3000,
delay:3000
});
});
</script>
<body>
<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>
</body>
|
일단 html을 위와 같은 형태로 작성해주세요.
최상단 id는 무엇이와도 상관 없지만 class의 경우는 무조건 container라고 적어주세요.
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="slidebanner.js"></script>
<script>
$(function(){
$('#banner1').slidebanner({
page:true,
arrow:{left:'◀',right:'▶'},
auto:true,
speed:3000,
delay:3000
});
});
</script>
<body>
<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>
</body>
|
css는 다음과 같이 작성해주시는데요.
첫줄에 width(배너가로사이즈), height(배너높이), overflow는 필수로 작성해주셔야해요.
.page와 .arrowleft, .arrowright는 페이지와 화살표를 사용할분들만 작성해주세요.
다른거 없이 left와 top만 잡아주시면 되요.
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="slidebanner.js"></script>
<script>
$(function(){
$('#banner1').slidebanner({
page:true,
arrow:{left:'◀',right:'▶'},
auto:true,
speed:3000,
delay:3000
});
});
</script>
<body>
<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>
</body>
|
세번째로 slidebanner.js 제이쿼리(jquery) 플러그인을 연결해주구요.
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="slidebanner.js"></script>
<script>
$(function(){
$('#banner1').slidebanner({
page:true,
arrow:{left:'◀',right:'▶'},
auto:true,
speed:3000,
delay:3000
});
});
</script>
<body>
<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>
</body>
|
document가 로딩이 완료되는 시점에 위와 같이 작성해주시면 되요.
위에 보시는거 이외에 슬라이드 플러그인에 옵션이 많은데요.
page : 페이지를 보여지게 할것인지
pageoncolor : 페이지가 켜졌을때 컬러, 예) pageoncolor : '#2f2f2f',
pagecolor : 페이지가 꺼졌을때 컬러, 예) pageoncolor : '#11111',
arrow : 좌우 화살표를 어떤걸로 나타낼지.<img src="이미지경로"> 이런식으로 써주면 이미지를 화살표로 사용가능. arrow 옵션을 지우면 화살표 나타나지 않음
auto : 자동으로 슬라이드 시킬지 여부, false 면 수동
speed : 자동으로 슬라이드시 다음 배너로 넘어가는 속도, 1000 = 1초, 옵션 삭제시 자동으로 0.6초 적용됨
delay : 자동으로 슬라이드시 다음배너로 넘어가서 머무는 시간, 1000 = 1초, 옵션 삭제시 자동으로 1초 적용됨
정말 필요한 옵션만 담으려고 노력했네요.
제이쿼리(jquery) 이미지 슬라이드는
제홈페이지 여기 홈페이지 plugin share에서 다운로드 가능하구요.
플러그인 이름은 그냥 slidebanner.js 라고 했어요.
테스트는 익스11, 크롬, 파폭과 모바일에서 테스트 되었구요.
개발시간의 단축이나 해외 슬라이드 플러그인이 사용하기 어려우신분들은 받아가세요.
오랜시간 고생해서 만든 저를 생각해서 공감 또는 댓글 남겨주시고
다음버전을 기대해주세요.
