Антон Литвиненко

.slick-list {
      margin: 0 -15px;
  }

  .slick-slide {
      margin: 0 15px;
  }

$(window).on('resize', function(e){
  // Переменная, по которой узнаем запущен слайдер или нет.
  var initLib = $('.library-slider').data('init-slider');

  if(window.innerWidth < 768){
    // Если слайдер не запущен
    if(initLib != 1){
      // Запускаем слайдер и записываем в data init-slider = 1
      $('.library-slider').slick({
        arrows: false,
        dots: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        responsive: [
          {
            breakpoint: 576,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1,
            }
          },
          {
            breakpoint: 480,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
            }
          }
        ]
      }).data({'init-slider': 1});
    }
  }
  // Если десктоп
  else {
    // Если слайдер запущен
    if(initLib == 1){
      // Разрушаем слайдер и записываем в data init-slider = 0
      $('.library-slider').slick('unslick').data({'init-slider': 0});
    }
  }
}).trigger('resize')

$(window).on('resize', function(e){
  // Переменная, по которой узнаем запущен слайдер или нет.
  var initLib = $('.library-slider').data('init-slider');

  if(window.innerWidth < 768){
    // Если слайдер не запущен
    if(initLib != 1){
      // Запускаем слайдер и записываем в data init-slider = 1
      $('.library-slider').slick({
        arrows: false,
        dots: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        responsive: [
          {
            breakpoint: 576,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1,
            }
          },
          {
            breakpoint: 480,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
            }
          }
        ]
      }).data({'init-slider': 1});
    }
  }
  // Если десктоп
  else {
    // Если слайдер запущен
    if(initLib == 1){
      // Разрушаем слайдер и записываем в data init-slider = 0
      $('.library-slider').slick('unslick').data({'init-slider': 0});
    }
  }
}).trigger('resize')

$(window).on('resize', function(e){
	// Переменная, по которой узнаем запущен слайдер или нет.
	var initLib = $('.library-slider').data('init-slider');

	if(window.innerWidth < 768){
		// Если слайдер не запущен
		if(initLib != 1){
			// Запускаем слайдер и записываем в data init-slider = 1
			$('.library-slider').slick({
				arrows: false,
				dots: true,
				slidesToShow: 3,
				slidesToScroll: 1,
				responsive: [
					{
						breakpoint: 576,
						settings: {
							slidesToShow: 2,
							slidesToScroll: 1,
						}
					},
					{
						breakpoint: 480,
						settings: {
							slidesToShow: 1,
							slidesToScroll: 1,
						}
					}
				]
			}).data({'init-slider': 1});
		}
	}
	// Если десктоп
	else {
		// Если слайдер запущен
		if(initLib == 1){
			// Разрушаем слайдер и записываем в data init-slider = 0
			$('.library-slider').slick('unslick').data({'init-slider': 0});
		}
	}
}).trigger('resize')

Разметка для вывода
<span class="paging-info"></span>
В ней появятся еще спаны

<span class="current"></span>
<span class="total"></span>

var $pagingInfo = $('.paging-info');
var $teamSlider = $('.team-slider');

$teamSlider.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
	var i = (currentSlide ? currentSlide : 0) + 1;
	var prefix = i < 10 ? '0' : '';
	var prefixAll = slick.slideCount < 10 ? '0' : '';
	$pagingInfo.html('<span class="current">' + prefix + i + '</span>' + '' + '<span class="total">' + prefixAll + slick.slideCount + '</span>');
});

ну и собственно инициализациия самого слайдера далее

У слика это встроенная возможность. Но есть один баг, поэтому подключайте не минифицированную версию скриптов

Если посмотреть на разметку предлагаемую документацией

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

То вот эти пустые дивы слайдер использует для своих целей и работает с ними.
Просто оставьте их пустыми. А ваши слайды пускай будут вложены в них, с нужными вам классами, айдишниками итд

<div class="your-class">
  <div>
    <div class="my-slide">
      my content
    </div>
  </div>
  <div>
    <div class="my-slide">
      my content
    </div>
  </div>
  <div>
    <div class="my-slide">
      my content
    </div>
  </div>
</div>

https://codepen.io/semenchenko/pen/ppJJOJ
Вот я недавно у кого-то наткнулся, но надо доработать переключение на первый слайд

$('.all-cats-btn').on('click', function(e) {
	e.preventDefault();
	$('.catalog-main').slick('unslick');
});

Недавно был такой вопрос

var $pagingInfo = $('.paging-info');
var $heroSlider = $('.hero-slider');

$heroSlider.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
	var i = (currentSlide ? currentSlide : 0) + 1;
	var prefix = i < 10 ? '0' : '';
	var prefixAll = slick.slideCount < 10 ? '0' : '';
	$pagingInfo.html('<span class="current">' + prefix + i + '</span>' + '/' + prefixAll + slick.slideCount);
});

Ну с цифрами просто

var $pagingInfo = $('.paging-info');
var $heroSlider = $('.hero-slider');

$heroSlider.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
	var i = (currentSlide ? currentSlide : 0) + 1;
	var prefix = i < 10 ? '0' : '';
	var prefixAll = slick.slideCount < 10 ? '0' : '';
	$pagingInfo.html('<span class="current">' + prefix + i + '</span>' + '/' + prefixAll + slick.slideCount);
});

Каждому слайдеру свой класс и 3 инициализации

в секции делаем два блока. один под текст, другой под слайдер. а слайдеру потом такие стили

.slick-slide {
	margin: 0 15px;
}
.slick-list {
	margin: 0 -15px;
	padding: 0 10% 0 0;
}

Конкретно тот, что с паддингом. там где маргины - это для отступов меж слайдов

Я заморочился, скачал и открыл и запустил у себя.
Все работает как и должно. У вас centerMode: true, даже в демках на сайте слика оно так и выглядит при этом режиме. половинки по краям.
А еще у вас нет метатега viewport типа такого:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

А еще свои стили и скрипты нужно подключать после библиотечных.
А еще зачем два раза подключать скрипты слайдера?
А еще инициализацию слайдера тоже бы неплохо завернуть в document.ready

Вот нагуглил пару решений:
https://github.com/kenwheeler/slick/issues/1527
https://stackoverflow.com/questions/36172489/slick...

Попробовал на одном на парочке своих проектов, на слике тоже такая штука, а вот со Swiper вроде норм. Попробуете Swiper slider