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

정보공유

[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 417건 1 페이지
번호 제목 글쓴이 날짜 조회
열람중 탭으로 나눠지는 슬라이드 쇼 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-13 107
416 자바스크립트 소수점 포함 numberformat 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-18 240
415 Click jacking, Frame sniffing 등과 같은 Frame을 이용한 공격 방어 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-05 361
414 쿠키 Secure 속성 옵션 추가. 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-05 355
413 쿠키 하이젝킹 방지(cookie hijacking) HttpOnly, 쿠키 HttpOnly 속성 누락. 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-05 366
412 [sprintf 함수] 결과값 처리 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-09 535
411 SQL 인젝션 막기를 위한 php 코드 수정. 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-08 556
410 php json_encode 옵션 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-09 745
409 그누보드 clean_xss_tags 함수 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-28 899
408 인스타그램을 경유해서 쇼핑몰 ISP 결제오류 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-30 1193