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

정보공유

[JQUERY] 탭으로 나눠지는 슬라이드 쇼


<link rel="stylesheet" href="<?php echo G5_CSS_URL;?>/swiper-bundle.min.css?ver=221113" />

<script src="<?php echo G5_JS_URL;?>/swiper.js?ver=221113"></script>

<style>

.tab_wrap {max-width: 800px;margin: 0 auto 0;padding: 0;}

.tab_wrap .tit_list {position: relative;font-size: 0;}

.tab_wrap .tit_list:before {content:'';position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;background: #ddd;z-index: 1;}

.tab_wrap .tit_list > li {display: inline-block;vertical-align: top;margin-right: 3px;}

.tab_wrap .tit_list > li a {display: inline-block;padding: 10px 15px;border: 1px solid #fff;border-radius:4px 4px 0 0;font-size: 14px;color: #000;text-decoration: none;}

.tab_wrap .tit_list > li a:hover {background: #efefef;border-color: #efefef;}

.tab_wrap .tit_list > li.active a {position: relative;border-color: #ddd;border-bottom: 1px solid #fff;background: #fff;color: #337ab7;z-index: 2;}

.tab_wrap .tab_con {border: 1px solid #ddd;border-top: none;background-color:#000}

.tab_wrap .tab_con .mySwiper {display: none;padding:0px;}

.tab_wrap .tab_con .mySwiper:first-child {display:block;}

.tab_wrap .swiper-pagination {position:relative;bottom:0;padding:8px 0;}

.tab_wrap .swiper-slide {text-align:center}

</style>


<div class="tab_wrap">

    <!-- 탭메뉴 제목 -->

    <ul class="tit_list">

        <!-- 디폴트 선택 li에 active 클래스 추가 -->

        <li class="active"><a href="#mySwiper0">1번째 탭</a></li>

        <li><a href="#mySwiper1">2번째 탭</a></li>

        <li><a href="#mySwiper2">3번째 탭</a></li>

    </ul>


    <!-- 탭메뉴 컨텐츠 -->

    <div class="tab_con">


        <!-- Swiper -->

        <div id="mySwiper0" class="swiper mySwiper">

            <div class="swiper-wrapper">

                <div class="swiper-slide"><img src="<?php echo G5_IMG_URL;?>/card_news/01_01.jpg"></div>

                <div class="swiper-slide"><img src="<?php echo G5_IMG_URL;?>/card_news/01_02.jpg"></div>

                <div class="swiper-slide"><img src="<?php echo G5_IMG_URL;?>/card_news/01_03.jpg"></div>

            </div>

            <div class="swiper-button-next"></div>

            <div class="swiper-button-prev"></div>

            <div class="swiper-pagination"></div>

        </div>


        <!-- Swiper -->

        <div id="mySwiper1" class="swiper mySwiper">

            <div class="swiper-wrapper">

                <div class="swiper-slide"><img src="<?php echo G5_IMG_URL;?>/card_news/02_01.jpg"></div>

                <div class="swiper-slide"><img src="<?php echo G5_IMG_URL;?>/card_news/02_02.jpg"></div>

                <div class="swiper-slide"><img src="<?php echo G5_IMG_URL;?>/card_news/02_03.jpg"></div>

            </div>

            <div class="swiper-button-next"></div>

            <div class="swiper-button-prev"></div>

            <div class="swiper-pagination"></div>

        </div>


        <!-- Swiper -->

        <div id="mySwiper2" class="swiper mySwiper">

            <div class="swiper-wrapper">

                <div class="swiper-slide"><img src="<?php echo G5_IMG_URL;?>/card_news/01_07.jpg"></div>

                <div class="swiper-slide"><img src="<?php echo G5_IMG_URL;?>/card_news/01_08.jpg"></div>

                <div class="swiper-slide"><img src="<?php echo G5_IMG_URL;?>/card_news/01_09.jpg"></div>

            </div>

            <div class="swiper-button-next"></div>

            <div class="swiper-button-prev"></div>

            <div class="swiper-pagination"></div>

        </div>

    </div>

</div>



<script type="text/javascript">

<!--

    var swiperArr = new Array();

    $('.mySwiper').each(function(index){

        swiperArr[index] = new Swiper('#mySwiper'+index, {

            spaceBetween: 0,

            centeredSlides: true,

            autoplay:false,

            pagination: {

                el: $('#mySwiper'+ index).find('.swiper-pagination'),

                clickable: true,

                type : 'fraction',   //페이징 타입 설정(종류: bullets, fraction, progressbar)

            },

            navigation: {

              nextEl: $('#mySwiper'+ index).find('.swiper-button-next'),

              prevEl: $('#mySwiper'+ index).find('.swiper-button-prev'),

            },

        });

    });


    $(document).ready(function () {

        $(document).on('click', '.tab_wrap .tit_list > li a', function(e) {


            e.preventDefault();


            //초기화

            $('.tab_wrap .tit_list > li').removeClass('active');

            $('.tab_wrap .mySwiper').hide();


            //실행

            $(this).parent().addClass('active');

            var activeTab = $(this).attr('href');

            var idx = $(this).parent().index();


            $(activeTab).show();

            swiperArr[idx].update();

        });

    });

//-->

</script>


첨부파일

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