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

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


  1. 2018.01.03 10:53

    비밀댓글입니다

  2. 2018.02.07 00:33

    비밀댓글입니다

    • 2018.02.07 00:54

      비밀댓글입니다

+ Recent posts