slider with masonry effect

screenshot - https://prnt.sc/nip75x
custom module - https://prnt.sc/nip7hj
demo - http://huronassociates-5576036.hs-sites.com/ , http://huronassociates.com/

HTML =====================================================

<div class="custom-service-offerings">
  <div class="page-center">
    <h3 class="vc_custom_heading">{{ module.heading }}</h3>
    <div class="service-offerings-wrapper">
      <div class="tg-filters-holder">
        <div class="tg-filter tg-filter-active" data-filter="*">
          <span class="tg-filter-name tg-nav-color tg-nav-font">All</span>
        </div>
        {% for item in module.item %}
        {% for item2 in item.category_item %}
        <div class="tg-filter" data-taxo="post_tag" data-filter=".{{ item2.category|replace(' ','_')|lower|replace('/','') }}">
          <span class="tg-filter-name tg-nav-color tg-nav-font">{{ item2.category }}</span>
        </div>
        {% endfor %}
        {% endfor %}
      </div>
      <div class="tg-grid-slider">
        <div class="tg-grid-holder tg-layout-grid">
          {% for item in module.item %}
          <div class="tg-item {% for item2 in item.category_item %} {{ item2.category|replace(' ','_')|lower|replace('/','') }}{% endfor %}">
            <div class="tg-item-bg" style="background-image:url('{{ item.image.src }}');"></div>
            <div class="tg-item-overlay"></div>
            <div class="tg-content-wrapper">
              <div class="tg-item-content-inner">
                <h2 class="tg-item-title">
                  {% set href = item.link.url.href %}
                  {% if item.link.url.type is equalto "EMAIL_ADDRESS" %}
                  {% set href = "mailto:" + href %}
                  {% endif %}
                  <a href="{{ href }}" {% if item.link.open_in_new_tab %}target="_blank"{% endif %} {% if item.link.no_follow %}rel="nofollow"{% endif %}>
                    {{ item.title }}</a>
                </h2>
                <a class="tg-link-button" href="{{ href }}" {% if item.link.open_in_new_tab %}target="_blank"{% endif %}><i class="tg-icon-add"></i>Read More</a>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>




JS ========================================================

//=== remove duplicate li
var liText = '',
    liList = $('.service-offerings-wrapper .tg-filters-holder .tg-filter'),
    listForRemove = [];
$(liList).each(function() {
  var text = $(this).html();
  if (liText.indexOf('|' + text + '|') == -1)
    liText += '|' + text + '|';
  else
    listForRemove.push($(this));
});
$(listForRemove).each(function() {
  $(this).remove();
});

//=== short alphabetic
var mylist = $('.tg-filters-holder');
var listitems = mylist.children('.tg-filter').get();
listitems.sort(function(a, b) {
  var compA = $(a).text().toUpperCase();
  var compB = $(b).text().toUpperCase();
  return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });





//=====slider with masonary

//=== add slider arrow
$('.tg-grid-slider').after('<div class="slider-nav"><div class="nav-arrow left"><i></i></div><div class="nav-arrow right"><i></i></div></div>')

//=== check position
function checkArrow(){
  if( $('.tg-grid-holder.tg-layout-grid').css('transform').split(',')[4].trim() == 0 ){
    $('.nav-arrow.left').addClass('disable');
  }else{
    $('.nav-arrow.left').removeClass('disable');
  }
  var a = $('.tg-grid-holder.tg-layout-grid').width();
  var b = $('.tg-grid-slider').width();
  var c = b - a;
  if( parseInt($('.tg-grid-holder.tg-layout-grid').css('transform').split(',')[4].trim()) == c ){
    $('.nav-arrow.right').addClass('disable');
  }else{
    $('.nav-arrow.right').removeClass('disable');
  }
}


function parentWidth(){
  //=== add width for each item
  var windowWidth = $(window).width();
  var eachWidth;
  if( windowWidth >= 768){
    eachWidth = $('.tg-grid-slider').width() / 4;
  }
  if( windowWidth < 768 && windowWidth >= 480){
    eachWidth = $('.tg-grid-slider').width() / 3;
  }
  if( windowWidth < 480 && windowWidth > 320){
    eachWidth = $('.tg-grid-slider').width() / 2;
  }
  if(windowWidth < 321){
    eachWidth = $('.tg-grid-slider').width() / 1;
  }
  $('.tg-grid-holder .tg-item').width(eachWidth);
  var totalLength = $('.tg-grid-holder .tg-item:not(.slide_hide)').length;
  var totalWidth = eachWidth*totalLength;
  $('.tg-grid-slider .tg-grid-holder').css('width', totalWidth );
}

var eachItemWidthBefore;
var eachItemWidth;


$(window).on("load resize", function(){

  parentWidth();
  checkArrow();

  eachItemWidth = $('.tg-grid-slider .tg-item').width();
  if( eachItemWidthBefore == eachItemWidth ){
    eachItemWidthBefore = eachItemWidth;
  }else{
    $('.tg-grid-holder.tg-layout-grid').css('transform','translateX(0px)');
    eachItemWidthBefore = eachItemWidth;
  }

  setTimeout(function(){
    if( $('.tg-grid-holder.tg-layout-grid').width() < $('.tg-grid-slider').width() ){
      $('.slider-nav').addClass('disable');
    }else{
      $('.slider-nav').removeClass('disable');
    }
  },301);
});


//=== navitaion click - right side

$('.nav-arrow.right').click(function(){
  var windowWidth = $(window).width();
  var currentPos = parseInt($('.tg-grid-holder.tg-layout-grid').css('transform').split(',')[4].trim());
  if( windowWidth >= 768){
    if( $('.tg-grid-holder.tg-layout-grid').width() - $('.tg-grid-slider').width() > $('.tg-grid-slider').width() ){
      currentPos = -(Math.abs(currentPos) + $('.tg-grid-holder .tg-item').width() * 4);
      $('.tg-grid-holder.tg-layout-grid').css('transform','translateX('+currentPos+'px)');
    }else{
      currentPos = -(Math.abs(currentPos) + ( $('.tg-grid-holder.tg-layout-grid').width() - $('.tg-grid-slider').width() ));
      $('.tg-grid-holder.tg-layout-grid').css('transform','translateX('+currentPos+'px)');
    }
    setTimeout(function(){
      checkArrow();
    },350);
  }
  if( windowWidth < 768 && windowWidth >= 480){
    if( $('.tg-grid-holder.tg-layout-grid').width() - $('.tg-grid-slider').width() > $('.tg-grid-slider').width() ){
      currentPos = -(Math.abs(currentPos) + $('.tg-grid-holder .tg-item').width() * 3);
      $('.tg-grid-holder.tg-layout-grid').css('transform','translateX('+currentPos+'px)');
    }else{
      currentPos = -(Math.abs(currentPos) + ( $('.tg-grid-holder.tg-layout-grid').width() - $('.tg-grid-slider').width() ));
      $('.tg-grid-holder.tg-layout-grid').css('transform','translateX('+currentPos+'px)');
    }
    setTimeout(function(){
      checkArrow();
    },350);
  }
  if( windowWidth < 480 && windowWidth > 320){
    if( $('.tg-grid-holder.tg-layout-grid').width() - $('.tg-grid-slider').width() > $('.tg-grid-slider').width() ){
      currentPos = -(Math.abs(currentPos) + $('.tg-grid-holder .tg-item').width() * 2);
      $('.tg-grid-holder.tg-layout-grid').css('transform','translateX('+currentPos+'px)');
    }else{
      currentPos = -(Math.abs(currentPos) + ( $('.tg-grid-holder.tg-layout-grid').width() - $('.tg-grid-slider').width() ));
      $('.tg-grid-holder.tg-layout-grid').css('transform','translateX('+currentPos+'px)');
    }
    setTimeout(function(){
      checkArrow();
    },350);
  }
  if(windowWidth < 321){
    if( $('.tg-grid-holder.tg-layout-grid').width() - $('.tg-grid-slider').width() > $('.tg-grid-slider').width() ){
      currentPos = -(Math.abs(currentPos) + $('.tg-grid-holder .tg-item').width() * 1);
      $('.tg-grid-holder.tg-layout-grid').css('transform','translateX('+currentPos+'px)');
    }else{
      currentPos = -(Math.abs(currentPos) + ( $('.tg-grid-holder.tg-layout-grid').width() - $('.tg-grid-slider').width() ));
      $('.tg-grid-holder.tg-layout-grid').css('transform','translateX('+currentPos+'px)');
    }
    setTimeout(function(){
      checkArrow();
    },350);
  }
});



//=== navitaion click - left side

$('.nav-arrow.left').click(function(){
  var windowWidth = $(window).width();
  var currentPos = parseInt($('.tg-grid-holder.tg-layout-grid').css('transform').split(',')[4].trim());
  if( windowWidth >= 768){
    if( $('.tg-grid-holder.tg-layout-grid').width() - $('.tg-grid-slider').width() > $('.tg-grid-slider').width() ){
      currentPos = (currentPos + $('.tg-grid-holder .tg-item').width() * 4);
      $('.tg-grid-holder.tg-layout-grid').css('transform','translateX('+currentPos+'px)');
    }else{
      currentPos = (currentPos + ( $('.tg-grid-holder.tg-layout-grid').width() - $('.tg-grid-slider').width() ));
      $('.tg-grid-holder.tg-layout-grid').css('transform','translateX('+currentPos+'px)');
    }
    setTimeout(function(){
      checkArrow();
    },350);
  }
  if( windowWidth < 768 && windowWidth >= 480){
    if( $('.tg-grid-holder.tg-layout-grid').width() - $('.tg-grid-slider').width() > $('.tg-grid-slider').width() ){
      currentPos = (currentPos + $('.tg-grid-holder .tg-item').width() * 3);
      $('.tg-grid-holder.tg-layout-grid').css('transform','translateX('+currentPos+'px)');
    }else{
      currentPos = (currentPos + ( $('.tg-grid-holder.tg-layout-grid').width() - $('.tg-grid-slider').width() ));
      $('.tg-grid-holder.tg-layout-grid').css('transform','translateX('+currentPos+'px)');
    }
    setTimeout(function(){
      checkArrow();
    },350);
  }
  if( windowWidth < 480 && windowWidth > 320){
    if( $('.tg-grid-holder.tg-layout-grid').width() - $('.tg-grid-slider').width() > $('.tg-grid-slider').width() ){
      currentPos = (currentPos + $('.tg-grid-holder .tg-item').width() * 2);
      $('.tg-grid-holder.tg-layout-grid').css('transform','translateX('+currentPos+'px)');
    }else{
      currentPos = (currentPos + ( $('.tg-grid-holder.tg-layout-grid').width() - $('.tg-grid-slider').width() ));
      $('.tg-grid-holder.tg-layout-grid').css('transform','translateX('+currentPos+'px)');
    }
    setTimeout(function(){
      checkArrow();
    },350);
  }
  if(windowWidth < 321){
    if( $('.tg-grid-holder.tg-layout-grid').width() - $('.tg-grid-slider').width() > $('.tg-grid-slider').width() ){
      currentPos = (currentPos + $('.tg-grid-holder .tg-item').width() * 1);
      $('.tg-grid-holder.tg-layout-grid').css('transform','translateX('+currentPos+'px)');
    }else{
      currentPos = (currentPos + ( $('.tg-grid-holder.tg-layout-grid').width() - $('.tg-grid-slider').width() ));
      $('.tg-grid-holder.tg-layout-grid').css('transform','translateX('+currentPos+'px)');
    }
    setTimeout(function(){
      checkArrow();
    },350);
  }
});


//====== filter click

$('.service-offerings-wrapper .tg-filters-holder .tg-filter').click(function(){
  $(this).addClass('tg-filter-active').siblings().removeClass('tg-filter-active');
  var clickFIlter = $(this).attr('data-filter').replace('.','');
  if( clickFIlter == "*"){
    $('.tg-grid-slider .tg-grid-holder .tg-item').removeClass('slide_hide');
  }else{
    $('.tg-grid-slider .tg-grid-holder .tg-item').each(function(){
      if ( $(this).attr('class').indexOf(clickFIlter) < 0 ){
        $(this).addClass('slide_hide');
      }else{
        $(this).removeClass('slide_hide');
      }
    });
  }
  parentWidth();
  checkArrow();
  $('.tg-grid-holder.tg-layout-grid').css('transform','translateX(0px)');
  setTimeout(function(){
    if( $('.tg-grid-holder.tg-layout-grid').width() < $('.tg-grid-slider').width() ){
      $('.slider-nav').addClass('disable');
    }else{
      $('.slider-nav').removeClass('disable');
    }
  },301);
});


$(window).load(function(){
  // init Isotope
  var $grid = $('.tg-grid-holder.tg-layout-grid').isotope({
    // options
  });
  // filter items on button click
  $('.service-offerings-wrapper .tg-filters-holder').on( 'click', '.tg-filter', function() {
    var filterValue = $(this).attr('data-filter');
    $grid.isotope({ filter: filterValue });
  });
});