2016/08/02 - [Jquery] - slidebanner.js 플러그인 - 슬라이드 배너 플러그인






요즘 다른건 다 제쳐두고 제이쿼리 플러그인만 주구장창 만드네요.


php 클래스도 만들고 솔루션도 만들고 다른것도 해야하는데.....


moon_and_james-26 






아무튼 오늘은 가장 많이 사용되는 배너 형태인 슬라이드를 제이쿼리(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, 크롬, 파폭과 모바일에서 테스트 되었구요.


개발시간의 단축이나 해외 슬라이드 플러그인이 사용하기 어려우신분들은 받아가세요.


오랜시간 고생해서 만든 저를 생각해서 공감 또는 댓글 남겨주시고


다음버전을 기대해주세요.





  1. 으악새 2015.10.03 16:41 신고

    설명해주신 대로 똑같이 연결하고 타이핑 했는데 왜 안되는 걸까요 ㅠㅠ
    제이쿼리도 두개 연결 똑같이 됬구 스타일,스크립트,바디도 다 똑같은데 안되네요..왜 그런걸까요 ㅠ

    • 홍시도둑 2015.10.04 06:50 신고

      여러가지 이유가 있을수 있는데요. 일단 콘솔창을 통해서 에러 메시지가 뭐라고 뜨는지 확인이 필요할것 같아요.

  2. maro 2015.10.22 11:55 신고

    잘 사용할게요 :)
    div를 ul- li로 변경해보려고 했는데 잘 안되네요. ㅜㅜ

  3. storm 2015.11.14 13:27 신고

    html 파일 각각 1개씩은 작동을 잘하는데 이두개를 한페이지에 넣어서 이부분 이름만"banner" "banner2" "slidebanner.js" "slidebanner1.js" 이런식으로 변경했는데 작동을 잘 하지않습니다. 서로 간섭하는것 같은데...이부분 해결할 방법이 없나요

    • 홍시도둑 2015.11.15 06:55 신고

      js파일을 하나만 이하시고. 실행 코드를 두개를 쓰세요.

    • storm 2015.11.16 10:21 신고

      죄송합니다. 초보라서 잘 모르겠습니다. 실해코드라면...좀 자세히 말씀해주세요

    • 홍시도둑 2015.11.16 15:59 신고

      <script src="slidebanner.js"></script>

      $('#banner1').slidebanner({
      ..생략..
      });

      $('#banner2').slidebanner({
      ..생략..
      });

    • stom 2015.11.16 20:23 신고

      감사합니다. 수정했는데 서로 간섭합니다. 고맙습니다.

    • stom 2015.11.16 20:27 신고

      이미지 수가 많아지니까 js파일 수정을 해야 되던데
      container.css 이부분....

  4. 알콩맘 2015.11.27 00:18 신고

    홈페이지에서 플러그인 쉐어를 다운로드 할 수가 없네요;.
    제 컴퓨터가 이상한가요? ;;;

    • 홍시도둑 2015.11.27 21:35 신고

      증상이 어떤지 스크힌샥 찍어서 제 메일로 보내주세요.

    • 알콩맘 2015.12.01 00:16 신고

      스크린샷 찍을 필요가 없네요; 클릭해도 다운로드 창이 뜨질 않아서요.

    • 홍시도둑 2015.12.02 16:40 신고

      html5가 지원되는 브라우저로 (엣지,ie9 이상, 크롬,사파리,파이어폭스) 인지 화인해보시고 팝업이 차단되어 있는지도 확인해보세요.

  5. 클러치 2016.05.03 17:02 신고

    우선 플러그인 감사히 잘 쓰고 있습니다...^^
    근데 혹시 마우스오버시 멈췄다가 바우스빼면 다시 움직이는 옵션은 없는지요~?
    만들려면 어떻게 하면 될지요...?
    초보라 죄송합니다~ㅠㅜ

  6. 클러치 2016.05.03 17:07 신고

    아참~ 근데 다음버전이 나오면 어디서 어떻게 확인할 수 있는지요?

  7. 흠... 2016.05.15 14:21 신고

    안녕하세요~ 혹시 이제 사용하지 못하나요? 몇일전부터 갑자기 안되더니 홈피에서 다시 링크 받아올랬더니 협력사랑 클라이언트만 사용할 수 있다고...;;;

+ Recent posts