<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>