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

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

QA

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

본문

https://codepen.io/blaxk/pen/Wrgexw

 

이 소스를 적용해보려하는데요... 그대로 html / css / js 복사해다가

소스입력했는데 작동이 안됩니다 ㅠㅠ

http://globallatex.com/test.html
이 테스트주소이고염


해당소스는...


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



위 코드대로 작성했는데 코드펜처럼 나오지 않네요 ㅠ뭐가 문제일가요 ㅠ

이 질문에 댓글 쓰기 :

답변 2

48 <script type="text/javascript" src="js/jquery.js"></script>
49 <script type="text/javascript" src="js/ixBand.js"></script>
50 <script type="text/javascript" src="js/ixSnack.js"></script>

 

위 부분에 도메인 주소 넣어서 경로를 제대로 설정해 보세요.

무엇이 문제일까요..
코드펜의  js 에 라이브러리


<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//rawgit.com/blaxk/ixband/master/dist/ixBand.min.js"></script>
<script type="text/javascript" src="//rawgit.com/blaxk/ixsnack/master/dist/ixSnack.min.js"></script>

이거 추가했는데도 안되네요 ㅠㅠ

답변을 작성하시기 전에 로그인 해주세요.
전체 1,178
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT