swiper 프로그래스바 슬라이드

swiper 프로그래스바 슬라이드

HTML

<div class="swiper_area">

<div class="swiper-container">

<ul class="swiper-wrapper slide_list">

<li class="swiper-slide"><p>1</p></li>

<li class="swiper-slide"><p>2</p></li>

<li class="swiper-slide"><p>3</p></li>

<li class="swiper-slide"><p>4</p></li>

</ul>

</div>

</div>

<div class="sipwer_total">

<span class="curront_num"></span>

<span>/</span>

<span class="max"></span>

</div>

<div class="bar"></div>

CSS

*{ margin:0; padding:0; }

html, body {

position: relative; overflow: hidden;

height: 100%;

}

body {

background: #eee;

font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

font-size: 14px;

color:#000;

margin: 0;

padding: 0;

}

.slide_list li{ display:block; float: left; width:100%; height: 100%; text-align: center;}

.slide_list li p{ padding-top:20%; font-size: 6rem; color:#151515; }

.sipwer_total{ position: absolute; bottom:60px; left: 20px; width:100%; z-index:100;}

.sipwer_total span{ display:inline-block; font-size:20px; color:#151515;}

.bar{ position: fixed; bottom:0; left:0; width:0; height: 20px; background:#151515; z-index:200;}

JAVASCRIPT

var _w;

var _wW;

var _wH;

var _body;

var _slideList;

var _mySwiper;

var _current;

var _total;

var _totalText;

var _bar;

function init()

{

create();

addEvent();

loadStart();

mainSlide();

barMotion();

showCount();

}

function create()

{

_w = $( window );

_body = $( "body" );

_slideList = $( ".slide_list" );

_current = $( ".curront_num" );

_total = _slideList.children( "li" ).length;

_totalText = $( ".max" );

_bar = $( ".bar" );

}

function addEvent()

{

resizeEvent( null );

_w.on( "resize", resizeEvent );

}

function loadStart()

{

TweenMax.set( _body, { opacity: 0 });

TweenMax.to( _body, 0.1, { opacity: 1, ease:Power0.easeIn, onComplete:function(){

_totalText.text( _total );

}});

}

var _indexSwiper = 0;

function showCount()

{

_current.text( _indexSwiper + 1 );

}

function resizeEvent()

{

_wW = _w.width();

_wH = _w.height();

_slideList.css({ width: _wW, height: _wH });

}

function mainSlide()

{

_mySwiper = new Swiper('.swiper-container', {

pagination:{

watchSlidesProgress: true,

autoplay: 5000

},

on: {

slideChange : function()

{

_indexSwiper = _mySwiper.activeIndex;

showCount();

barMotion();

}

}

});

}

function barMotion()

{

TweenMax.killTweensOf( _bar );

TweenMax.set( _bar, { width: "0%" });

TweenMax.to( _bar, 5, { width: "100%", ease:Power0.easeIn, onComplete:function(){

_indexSwiper ++;

console.log( _indexSwiper );

showSwiper( _indexSwiper );

barMotion();

}});

}

function showSwiper( $index )

{

if( $index < 0 )

{

_indexSwiper = 0;

}else if( _indexSwiper >= _total )

{

_indexSwiper = 0;

}

_mySwiper.slideTo( _indexSwiper );

}

예제 샘플

http://ux.adqua.co.kr/ux/ixkfo86/test/swiper3/