코드펜 사용방법아시는분 계시나요?ㅠ
본문
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>
이거 추가했는데도 안되네요 ㅠㅠ
신비님말씀대로 경로 문제랑 같이
제이쿼리등의 라이브러리는 우측 상단에 보면 라이브러리추가 박스에서 추가 가능합니다.
답변을 작성하시기 전에 로그인 해주세요.
