ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • slidebanner.js 플러그인 - 슬라이드 배너 플러그인
    워크식스소식/플러그인소식 2016. 8. 2. 23:44







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

    <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. 워크식스


    댓글 3

work6.kr