위토즈 - 개발자프로그램판매공간

정보공유

[JQUERY] jquery 스와이프 메뉴


<style>

.frame{height:250px;line-height:250px;overflow:hidden}

.frame ul{list-style:none;margin:0;padding:0;height:100%;font-size:50px}

.frame ul li{float:left;width:227px;height:100%;margin:0 1px 0 0;padding:0;background:#333;color:#ddd;text-align:center;cursor:pointer}

.frame ul li.active{color:#fff;background:#a03232}

.scrollbar{margin:0 0 1em 0;height:2px;background:#ccc;line-height:0}

.scrollbar .handle{width:100px;height:100%;background:#292a33;cursor:pointer}

.scrollbar .handle .mousearea{position:absolute;top:-9px;left:0;width:100%;height:20px}

.pages{list-style:none;margin:20px 0;padding:0;text-align:center}

.pages li{display:inline-block;width:14px;height:14px;margin:0 4px;text-indent:-999px;border-radius:10px;cursor:pointer;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}

.pages li:hover{background:#aaa}

.pages li.active{background:#666}

.controls{margin:25px 0;text-align:center}

.oneperframe{height:300px;line-height:300px}

.oneperframe ul li{width:1140px}

.oneperframe ul li.active{background:#333}

.crazy ul li:nth-child(2n){width:100px;margin:0 4px 0 20px}

.crazy ul li:nth-child(3n){width:300px;margin:0 10px 0 5px}

.crazy ul li:nth-child(4n){width:400px;margin:0 30px 0 2px}

</style>




<div class="scrollbar">

    <div class="handle">

        <div class="mousearea"></div>

    </div>

</div>


<div class="frame" id="basic">

    <ul class="clearfix">

        <li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li>

        <li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li>

        <li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li>

        <li>28</li><li>29</li>

    </ul>

</div>


<ul class="pages"></ul>


<div class="controls center">

    <button class="btn prevPage"><i class="fa fa-angle-double-left"></i> page</button>

    <button class="btn prev"><i class="fa fa-angle-left"></i> item</button>

    <button class="btn backward"><i class="fa fa-angle-left"></i> move</button>


    <div class="btn-group">

        <button class="btn toStart">toStart</button>

        <button class="btn toCenter">toCenter</button>

        <button class="btn toEnd">toEnd</button>

    </div>


    <div class="btn-group">

        <button class="btn toStart" data-item="10"><strong>10</strong> toStart</button>

        <button class="btn toCenter" data-item="10"><strong>10</strong> toCenter</button>

        <button class="btn toEnd" data-item="10"><strong>10</strong> toEnd</button>

    </div>


    <div class="btn-group">

        <button class="btn add"><i class="fa fa-plus-circle"></i></button>

        <button class="btn remove"><i class="fa fa-minus-circle"></i></button>

    </div>


    <button class="btn forward">move <i class="fa fa-angle-right"></i></button>

    <button class="btn next">item <i class="fa fa-angle-right"></i></button>

    <button class="btn nextPage">page <i class="fa fa-angle-double-right"></i></button>

</div>


<script src="https://darsa.in/sly/examples/js/vendor/plugins.js"></script>

<script src="https://darsa.in/sly/js/sly.min.js"></script>

<script src="https://darsa.in/sly/examples/js/horizontal.js"></script>


첨부파일

정보공유
Total 52건 1 페이지
번호 제목 글쓴이 날짜 조회
52 금액 카운팅 모션 다라라락 변화 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-26 1458
51 php 와 ajax 를 이용해서 파일 업로드 할때 대용량 파일을 업로드 하는 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-23 2306
50 datepicker 를 이용해서 달력3개를 표시하고 원하는 날짜만 선택이 가능하도록. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-28 2175
49 magnificPopup css 를 추가하여 popup 마다 다른 사이즈 로 띄우기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-16 2822
48 magnificPopup 조건이 맞지 않으면 popup 띄우지 않기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-12 2828
47 magnificPopup iframe 으로 form submit 하기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-12 2869
46 magnificPopup 으로 창을 호출 후 날짜 입력박스에 datepicker 실행되지 않는경우 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-13 3751
45 magnificPopup 파라미터 변수 값 ajax 타입으로 전송 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-31 3715
44 jquery 로 text 필드와 file 첨부를 동시에. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-09 3710
43 파일 첨부 를 이미지버튼으로 대체한경우 첨부한 파일명 표시하기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-09 3674
42 폼을 생성하고 선택된(필요한) 영역의 값만 전송 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-17 4382
41 탭으로 나눠지는 슬라이드 쇼 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-13 5528
40 jquery fullcalendar eventOrder 정렬 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-23 14345
39 주소복사 계좌번호복사 URL복사 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-11 12866
열람중 jquery 스와이프 메뉴 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-15 13902