jquery 스와이프 메뉴 > 정보공유

본문 바로가기

쇼핑몰 검색

위토즈소프트 로그인

회원가입 회원가입  아이디/비밀번호찾기 아이디/비밀번호찾기

정보공유 목록

JQUERY | jquery 스와이프 메뉴

페이지 정보

작성자 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일21-04-15 17:34 조회798 회 댓글0 건

첨부파일

본문


<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 386건 1 페이지
정보공유 목록
번호 제목 글쓴이 날짜 조회
386 그누보드팁 목록화면 기본 코드 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-04 112
385 퍼블리싱 웹페이지 인쇄할때 페이지 구분하는 style 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-20 388
열람중 JQUERY jquery 스와이프 메뉴 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-15 799
383 기타 F12 키코드 막기 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-14 511
382 SQL 중복키관리 ON DUPLICATE KEY UPDATE 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-13 592
381 SQL mysql FIND_IN_SET 함수 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-26 622
380 그누보드팁 그누보드, 영카트 다음API 우편번호 오류 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-16 713
379 그누보드팁 아이코드 예약 문자발송시 오류 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-10 739
378 기타 결제프로세스 연동과정 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-03 813
377 JQUERY datepicker range select 커스터마이징 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-30 1138
376 JQUERY URL 에 포함되어있는 특정 파라미터값 가져오기 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-29 1196
375 PHP HTTP_X_REQUESTED_WITH 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-29 1225
374 PHP 요일 처리 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-22 1203
373 기타 모바일 웹 애플리케이션 디버깅 초간단 설명 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-12 1501
372 퍼블리싱 페이지가 이유도 없이 중간에 리로딩 되는 문제 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-05 1591
게시물 검색