<style>
@charset 'utf-8';
/* 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;}

/* 슬라이드 전체 그룹 */
.slide {position:relative; margin-bottom:30px; padding:0 20px;}
/* viewport */
.slide .ix-list-viewport {overflow:hidden; height:100px;}
/* 슬라이드 영역, 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}
/* 슬라이드 인디케이터, 방향 버튼 그룹 */
.slide .ix-controller {}
.slide .ix-controller.disabled {visibility:hidden;}
/* 슬라이드 인디케이터 */
.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;}
/* 슬라이드 방향 버튼 */
.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>

<script>
//기본적용
$( '.slide' ).ixSlideMax();
</script>

<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>
<!-- "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>