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     //배너가 멈추어 있는 시간 설정
        });
 });

 

5. 옵션을 설정 합니다.

 

 

6. 소스는 여기서 다운로드 받을 수 있습니다.

[문의하기]

copyright ⓒ 2017. 워크식스