其實問題都還蠻~基本的
這邊有幾個建議：

1. 先弄懂$(document).ready()的發動時機點, 還有他是用來幹嘛的
2. 去查詢有關網頁事件綁定的相關知識,
3. 用套件的時候, 記得先去讀過套件的官方技術文件, 查詢他的api用法

有幾個很明顯的問題
我這邊把codepen裡面寫的程式直接貼在這裡

function mq() {
  //基本上modernizr的部分沒有問題
  var query = Modernizr.mq('(max-width: 768px)');
  // 當CSS media query計算的視窗寬度小於769px時執行
  if (query) {
      // 這邊是去給#holder元素塞入字串, 基本上沒什麼問題
      $('#holder').html('true');
      // 這邊很明顯的是搞錯了$(document).ready()的使用方式
      $(document).ready(function(){
          // 這邊也錯了,$(ele).slick({...})方法是初始化在用的，不是讓你即時變更輪播的狀態用
         $('.carousel').slick({
            slidesToShow:1,
            dots:true,
            centerMode: true,
         });
      });
  } 
  else {
      // 當CSS media query計算的視窗寬度大於等於769px時執行
      $('#holder').html('false');
      // 這邊很明顯的錯了, 跟上面一樣
      $(document).ready(function(){
          // 這邊也錯了, 跟上面一樣
          $('.carousel').slick({
            slidesToShow: 2,
            dots:true,
            centerMode: true,
          });
      });       
 }//if statement結尾
};
// resize事件最好都要養成做debounce的習慣, 避免效能問題
$(window).resize(function() {
    mq();
});
mq();

我個人是覺得初學其實不太推薦用codepen學JS，尤其是在於理解網頁事件綁定的部分
（codepen 有些東西是已經事先幫你做好了）
要把JS學好最好還是自己用vscode開一個簡易專案來測試

幫你改了一版修正後的範例
https://codepen.io/mizok/pen/RwVeaBe
8/10後會把這個範例刪掉（個人有習慣定期清除用不到的pen）, 如果要export請早