코드펜 사용방법아시는분 계시나요?ㅠ 채택완료

</p>

<p><style>

@charset 'utf-8';</p>

<p>/* base */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,     footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {

    margin:0;

    padding:0;

    border:0;

    font-size:100%;

    vertical-align:baseline;

    background:transparent;

    box-sizing:border-box;

    -webkit-text-size-adjust:none;

}

body {margin:50px 10px;}

ul li {list-style:none;}</p>

<p>

/* 슬라이드 전체 그룹 */

.slide {position:relative; margin-bottom:30px; padding:0 20px;}</p>

<p>/* viewport */

.slide .ix-list-viewport {overflow:hidden; height:100px;}</p>

<p>/* 슬라이드 영역, Safari9, Samsung Browser ~4 버전에서 position을 넣지 않으면 randering bug가 발생할 수 있다. */

.slide .ix-list-items {position:relative; left:0; top:0; width:100%; height:100%;}

.slide .ix-list-items .ix-list-item {float:left; width:50%; height:100px; text-align:center; background:#0087E9; border-radius:7px; margin:0 4px;}

.slide .ix-list-items .ix-list-item a {display:block; height:100%; padding-top:30px; font-size:30px; text-decoration: none; color:#fff}</p>

<p>/* 슬라이드 인디케이터, 방향 버튼 그룹 */

.slide .ix-controller {}

.slide .ix-controller.disabled {visibility:hidden;}</p>

<p>/* 슬라이드 인디케이터 */

.slide .ix-thumbs {position:absolute; bottom:-25px; left:0;right:0; text-align:center;}

.slide .ix-thumbs .ix-thumb {display:inline-block; margin:2px;}

.slide .ix-thumbs .ix-thumb .ix-btn {display:block; width:10px; height:10px; background:#8EAEBA; text-indent:-9999px; border-radius:100%;}

.slide .ix-thumbs .ix-thumb.active .ix-btn {background:#0087E9;}</p>

<p>/* 슬라이드 방향 버튼 */

.slide .slide_direction .ix-btn-prev {left:0; border-radius:100% 0 0 100%;}

.slide .slide_direction .ix-btn-next {right:0; border-radius:0 100% 100% 0;}

.slide .slide_direction .ix-btn-prev,

.slide .slide_direction .ix-btn-next {position:absolute; top:50%; width:20px; height:20px; margin-top:-10px; background:#8EAEBA; text-indent:-9999px;}

/* 버튼 비활성화 */

.slide .slide_direction .ix-btn-prev.disabled,

.slide .slide_direction .ix-btn-next.disabled {background:#D8E0E3; cursor:default;}

</style></p>

<p>

<script>

//기본적용

$( '.slide' ).ixSlideMax();

</script></p>

<p>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/ixBand.js"></script>

<script type="text/javascript" src="js/ixSnack.js"></script></p>

<p><!-- "ix-" 로 시작하는 class명은 필수 class명이다. data-ix-options속성에 옵션을 입력한다. -->

<div class="slide" data-ix-options="view-length:2; move-length:1; datum-point:25%">

    <!-- "ix-list-viewport" 는 직계 자식요소여야 한다. touch area -->

    <div class="ix-list-viewport">

        <!-- "ix-list-items" 는 "ix-list-viewport"의 직계 자식요소여야 한다. -->

        <ul class="ix-list-items">

            <!-- "ix-list-item" 는 "ix-list-items"의 직계 자식요소여야 한다. -->

            <li class="ix-list-item">

                <a href="#">Banner 1</a>

            </li>

            <li class="ix-list-item">

                <a href="#">Banner 2</a>

            </li>

            <li class="ix-list-item">

                <a href="#">Banner 3</a>

            </li>

            <li class="ix-list-item">

                <a href="#">Banner 4</a>

            </li>

        </ul>

    </div>

    <!-- "ix-controller" 는 직계 자식요소여야 한다. 필요없을시 삭제해도 무방하다. -->

    <div class="ix-controller">

        <ul class="ix-thumbs">

            <!-- "ix-thumb" 는 "ix-thumbs"의 직계 자식요소여야 한다. -->

            <!-- "ix-thumb"는 모델로 하나만 넣어주면 아이템 갯수만큼 자동 생성, "ix-index" 주석을 넣어준 부분에 index가 자동 입력된다. -->

            <li class="ix-thumb">

                <a class="ix-btn" href="#" title="<!--ix-index-->번째 배너"><!--ix-index-->번째 배너</a>

            </li>

        </ul>

        <div class="slide_direction">

            <!-- "ix-btn-prev", "ix-btn-next" 는 "ix-controller" 안에 존재해야 한다.-->

            <a class="ix-btn-prev" href="#">Prev</a>

            <a class="ix-btn-next" href="#">Next</a>

        </div>

    </div>

</div></p>

<p>