$blue: #0080ff;
$blue-cc: #cce6ff;
.slider{
  position: relative;
}
.swiper-slide{
  border: 1px solid #ccc;
  height: 100px;
  text-align: center;
  padding: 20px 0;
}
.slider-nav{
  display: flex;
  align-items: center;
}
.slider-arr{
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  width: 55px;
  margin-right: 27px;
}
.slider-progress-wrap{
  position: relative;
  flex: 1 1 auto;
}
.slider-progress{
  position: absolute;
  top: 14px;
  right: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: gray;
}
.slider-progress2{
  position: absolute;
  top: 14px;
  right: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: blue;
  transition : 0.25s ease-out;
}
.slider-num{
  margin-left: 20px;
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 24px;
  color: blue;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  padding-right: 5px;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
  background: pink;
}
.slider-scrollbar .swiper-scrollbar-drag{
  cursor: pointer;
  width: 5px;
  height: 2px;
  margin-top: 14.9px;
  background-color: blue;
  box-shadow: 0 4px 10px rgba(27, 75, 255, 0.4);
}
.portfolio{
  overflow: hidden;
  }
.prev,.next{
  cursor: pointer;
}

var portfolio = new Swiper('.portfolio', {
  slidesPerView: 3,
  spaceBetween: 0,
  preventClicks: false,
  preventClicksPropagation: false,
  navigation: {
    nextEl: '.next',
    prevEl: '.prev'
  },
  scrollbar: {
    el: '.slider-scrollbar',
    draggable: true,
    hide: false,
    snapOnRelease: false,
    dragSize: 30
  },
  breakpoints: {
    1050: {
      slidesPerView: 2
    },
    640: {
      slidesPerView: 1
    }
  },
  on: {
    init: function() {
      $('.js-current-slide').text(this.realIndex + 1);
      $('.js-all-slide').text(this.slides.length);
    },
    slideChange: function() {
      $('.js-current-slide').text(this.realIndex + 1);
    },
    setTranslate: function() {
      var progress = translateVal(this.scrollbar.dragEl);
      $('.slider-progress2').css('width', progress + 'px');
    },
    slideChangeTransitionStart: function() {
      var progress = translateVal(this.scrollbar.dragEl);
      $('.slider-progress2').css('width', progress + 'px');
    },
  }
});
function translateVal(el) {
  var progress = el.style.transform.match(/translate3d\((.+)px,(.+)px,(.+)px\)/);
  return progress[1];
}