페이지 스와이퍼

by hohoya33

HTML

<!-- 컨텐츠 영역 -->
	<main id="doc-contents">
		<div id="main-index" class="doc-block" style="background:#ECE4F3;">
			<article class="doc-wrap">
				<div  id="index-swipe" class="index-swipe">
					<!-- swipe 이미지영역 -->
					<div class="swiper-stage"  data-swipe="main-swiper">
						<ul class="swiper-wrapper">
						 
						 	
									<li class="swiper-slide on"  data-color="#ECE4F3">					
			<a href="/prd/prd.gs?prdid=60158815&bnclick=main-t02_ptiB_RelatedItemItemTvHome&rank=1&svcid=mc&lseq=416701-1&gsid=ECmain-AU416701-1-AU416701-1-1">
			
				<div class="ban-bigthum">
					<img class="ban-img" src="//image.gsshop.com/image/60/15/60158815_L1.jpg" onerror="this.src='//image.gsshop.com/ui/gsshop/pc/common/images/etc/no_img_L.gif'" alt="배너이미지">
				</div>
				
				<dl class="swipe-info">
					<dt class="def-title">
						<!-- 스티커  -->			
						
						
                        <em class="labels">[TV상품]</em>
                        
                        <span class="line-clamp">해피콜 신상 누아르 IH 프라이팬 6종 세트</span>
					</dt>
					<dd class="def-desc">
						
						<span class="def-percent"><span>6</span>%</span> 
						
						
						<span class="def-price"><strong>149,000</strong>원</span>
						
					</dd>
					<dd class="advantage">
						<div>
						 
								<span >무료배송</span>
							
						 
								<span >무이자</span>
							
						</div>
					</dd>
				</dl>
			</a>
		</li>

		
							
						 
						 	
									<li class="swiper-slide "  data-color="#F2E7D7">					
			<a href="/prd/prd.gs?prdid=36719409&bnclick=main-t02_ptiB_RelatedItemItemTvHome&rank=2&svcid=mc&lseq=416701-2&gsid=ECmain-AU416701-2-AU416701-2-1">
			
				<div class="ban-bigthum">
					<img class="ban-img" src="//image.gsshop.com/image/36/71/36719409_L1.jpg" onerror="this.src='//image.gsshop.com/ui/gsshop/pc/common/images/etc/no_img_L.gif'" alt="배너이미지">
				</div>
				
				<dl class="swipe-info">
					<dt class="def-title">
						<!-- 스티커  -->			
						
						
                        <em...

CSS

.index-swipe .swiper-navi ul,#main-onair,.item-module.bannerTypeC ul,.item-module.bannerTypeE,.item-module.bannerTypeE ul.swiper-slide,.flex-cube-box .figure-group,.category-tab ul {
    *zoom:1}

.index-swipe .swiper-navi ul:after,#main-onair:after,.item-module.bannerTypeC ul:after,.item-module.bannerTypeE:after,.item-module.bannerTypeE ul.swiper-slide:after,.flex-cube-box .figure-group:after,.category-tab ul:after {
    content: '';
    display: block;
    clear: both
}

.item-module.bannerTypeC li .copy {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.swipe-info .def-title .line-clamp {
    word-break: keep-all;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word
}

.swipe-info .sticker-deal,#main-onair .onair-benefit {
    background: url("../../../common/images/sprite_common.png") no-repeat
}

.swipe-info .sticker-deal,#main-onair .onair-benefit {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle
}

.swipe-info .sticker-deal,#main-onair .onair-benefit {
    font: 0/0 m;
    color: transparent;
    content: ''
}

#main-onair .set-price>strong,.item-module.typeC .set-price>strong {
    font-size: 19px
}

#doc-container {
    background: #f0f1f3
}

#doc-contents {
    padding-bottom: 50px
}

#sky-scraper {
    margin-top: -1px
}

#main-index {
    border-bottom: 1px solid #d9d9d9
}

.sect {
    position: relative;
    margin-top: 40px
}

.line-clamp {
    display: block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0
}

.swipe-info {
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    padding: 80px 0 0 68px
}

.swipe-info .def-title {
    letter-spacing: -1px;
    font-family: "Noto Sans KR","Malgun Gothic",helvetica
}

.swipe-info .def-title .labels {
    display: block;
    margin-bottom: 11px;
   ...

JavaScript

jQuery(function($){

	var mainSwiper = $('#index-swipe'); // 빅배너
	var bigBannerNavi = mainSwiper.find('.swiper-navi'); // 빅배너 썸네일
	var mainBannerIndex = 0;
	var mainBannerLength = bigBannerNavi.find('li').length;

	// 테블릿 분기
	var maxPositionSetValue =  ( GsBase.device == 'pc' ) ? false : true;
	var swiperSpeed =  ( GsBase.device == 'pc' ) ? 0 : 500;
	var swiperLoop =  ( GsBase.device == 'pc' ) ? false : true;
	
	// 썸네일 펼쳐 보기
	mainSwiper.find('.btn-all-view').on('click', function(){

		if ( bigBannerNavi.find('li').length >9 ) {
			
			if ( bigBannerNavi.hasClass('on') ) {
				bigBannerNavi.removeClass('on');
			}
			else {
				bigBannerNavi.addClass('on');
			}
		}
	});
	
	// 메인 스와퍼 
	$('[data-swipe=main-swiper]').gsSwiper({ mode:'fade', intervalTime:true,  autoplay:0, 
		
		onInit: function(current, total, $view ){
			// 임시 필터 - 추후 제거 
			var targetItem = $view.eq(current);
			
			targetItem.find('.ban-img').load(function(){
				
				if ( !targetItem.data('color')) {
				
					$('#main-index').css({backgroundColor: '#fff'});
					targetItem.data({'color':'#fff'});
				}
			});
		
		}, 
		
		onChangeStart:function(current, total, $view ) {
			
			mainBannerLength = total;
			mainBannerIndex = current;
			
			var targetItem = $view.eq(current);
			var imgWidth = targetItem.find('.ban-img').width();
			
			if ( !targetItem.data('color')) {
				$('#main-index').css({backgroundColor: '#fff'});
				targetItem.data({'color':'#fff'});
			}

			var cnt = Math.floor(current/9);
			var bgColor = $view.eq(current).data('color');

			bigBannerNavi.find('ul').css({marginTop:-113 * cnt});
			$('#main-index').stop().animate({backgroundColor: bgColor},  {duration:400, easing:'swing'});
		} 
	});
	// 메인 스와 섬네일 좌우 버튼 이벤트
	mainSwiper.find('.thumb-next').on('click', function(){
		var a = Math.floor(mainBannerIndex/9);
		var b = Math.ceil(mainBannerLength/9) -1;
		var reIdx = (a >= b) ? 0 : a +1;
		$('[data-swipe=main-swiper]').triggerHandler('goto',...