Skip to content

Instantly share code, notes, and snippets.

@manchumahara
Created February 23, 2019 20:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save manchumahara/679fc48e04e5f665c5ff83aa974dd590 to your computer and use it in GitHub Desktop.
Save manchumahara/679fc48e04e5f665c5ff83aa974dd590 to your computer and use it in GitHub Desktop.
//timeline
var timelineLimit = 7;
var timelineHalf = 3;
var timelineTotal = 0;
var timelineLimitO = 0;
var timelineHalfO = 0;
var timelineActive = 0;
var timelineSwiper = new Swiper ('.timeline .swiper-container', {
direction: 'vertical',
loop: false,
speed: 1600,
pagination: '.swiper-pagination',
paginationBulletRender: function (swiper, index, className) {
var year = document.querySelectorAll('.swiper-slide')[index].getAttribute('data-year');
timelineTotal++;
return '<span class="' + className + '">' + year + '</span>';
},
paginationClickable: true,
/*renderFraction: function (currentClass, totalClass) {
return '<span class="' + currentClass + '"></span>' +
' of ' +
'<span class="' + totalClass + '"></span>';
},
renderProgressbar: function (progressbarFillClass) {
return '<span class="' + progressbarFillClass + '"></span>';
},
*/
/*renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},*/
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
breakpoints: {
768: {
direction: 'horizontal',
}
},
onSlideNextEnd: function (s) {
//console.log('next');
timelineHalfO = timelineTotal - timelineHalf;
timelineLimitO = timelineTotal - timelineLimit;
timelineActive = $('.swiper-pagination-bullets').find('.swiper-pagination-bullet.swiper-pagination-bullet-active').index();
timelineActive = timelineActive+1;
timelinePagi(timelineTotal, timelineLimit, timelineLimitO, timelineActive, timelineHalfO, timelineHalf);
/*if(timelineTotal > timelineLimit){
if(timelineActive <= timelineLimit){
$('.swiper-pagination-bullets .swiper-pagination-bullet').each(function (index, element) {
var $current = index+1;
if($current <= timelineLimit) $(element).show();
else $(element).hide();
});
}
else if(timelineActive >= timelineLimitO){
$('.swiper-pagination-bullets .swiper-pagination-bullet').each(function (index, element) {
var $current = index+1;
if($current > timelineLimitO) $(element).show();
else $(element).hide();
});
}
else{
}
}//end*/
},
onSlidePrevEnd: function (s) {
//console.log('prev');
timelineHalfO = timelineTotal - timelineHalf;
timelineLimitO = timelineTotal - timelineLimit;
timelineActive = $('.swiper-pagination-bullets').find('.swiper-pagination-bullet.swiper-pagination-bullet-active').index();
timelineActive = timelineActive+1;
timelinePagi(timelineTotal, timelineLimit, timelineLimitO, timelineActive, timelineHalfO, timelineHalf);
},
//onPaginationRendered: function (s) {
onInit: function (s) {
//console.log('onPaginationRendered');
timelineHalfO = timelineTotal - timelineHalf;
timelineLimitO = timelineTotal - timelineLimit;
timelineActive = $('.swiper-pagination-bullets').find('.swiper-pagination-bullet.swiper-pagination-bullet-active').index();
timelineActive = timelineActive+1;
timelinePagi(timelineTotal, timelineLimit, timelineLimitO, timelineActive, timelineHalfO, timelineHalf);
}
});
function timelinePagi(timelineTotal, timelineLimit, timelineLimitO, timelineActive, timelineHalfO, timelineHalf) {
if(timelineTotal > timelineLimit){
if(timelineActive <= timelineLimit){
$('.swiper-pagination-bullets .swiper-pagination-bullet').each(function (index, element) {
var $current = index+1;
if($current <= timelineLimit) $(element).show();
else $(element).hide();
});
}
else if(timelineActive >= timelineLimitO){
$('.swiper-pagination-bullets .swiper-pagination-bullet').each(function (index, element) {
var $current = index+1;
if($current > timelineLimitO) $(element).show();
else $(element).hide();
});
}
else{
$('.swiper-pagination-bullets .swiper-pagination-bullet').each(function (index, element) {
var $current = index+1;
if($current < (timelineActive-timelineHalf)) $(element).hide();
else if($current > (timelineActive+timelineHalf)) $(element).hide();
else if($current == timelineActive) $(element).show();
else $(element).show();
});
}
}//end
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment