Почему не работает код js при открытии браузера (в jsfiddle и codepen работает) и почему не работают кнопки на слайдере [закрыт]

$(document).ready(function() { 
    var slideNow = 1; 
    var slideCount = $('#slidewrapper').children().length; 
 
    function nextSlide() { 
        if (slideNow === slideCount || slideNow <= 0 || slideNow > slideCount) { 
            $('#slidewrapper').css('transform', 'translate(0, 0)'); 
            slideNow = 1; 
        }  
        else { 
            translateWidth = -$('#viewport').width() * (slideNow); 
            $('#slidewrapper').css({ 
                'transform': 'translate(' + translateWidth + 'px, 0)', 
                '-webkit-transform': 'translate(' + translateWidth + 'px, 0)', 
                '-ms-transform': 'translate(' + translateWidth + 'px, 0)', 
            }); 
            slideNow++; 
        } 
    } 
 
    var translateWidth = 0; 
 
    var slideInterval = 7500; 
 
 
 
    var switchInterval = setInterval(nextSlide, slideInterval); 
 
    $('#viewport').hover(function(){ 
        clearInterval(switchInterval); 
    },function() { 
        switchInterval = setInterval(nextSlide, slideInterval); 
    }); 
 
    function prevSlide() { 
        if (slideNow === 1 || slideNow <= 0 || slideNow > slideCount) { 
            translateWidth = -$('#viewport').width() * (slideCount - 1); 
            $('#slidewrapper').css({ 
                'transform': 'translate(' + translateWidth + 'px, 0)', 
                '-webkit-transform': 'translate(' + translateWidth + 'px, 0)', 
                '-ms-transform': 'translate(' + translateWidth + 'px, 0)', 
            }); 
            slideNow = slideCount; 
        } else { 
            translateWidth = -$('#viewport').width() * (slideNow - 2); 
            $('#slidewrapper').css({ 
                'transform': 'translate(' + translateWidth + 'px, 0)', 
                '-webkit-transform': 'translate(' + translateWidth + 'px, 0)', 
                '-ms-transform': 'translate(' + translateWidth + 'px, 0)', 
            }); 
            slideNow--; 
        } 
    } 
 
    $('#next-btn').click(function() { 
        nextSlide(); 
    }); 
 
    $('#prev-btn').click(function() { 
        prevSlide(); 
    }); 
 
    var navBtnId = 0; 
 
    $('.nav_btn').click(function() { 
        navBtnId = $(this).index(); 
 
        if (navBtnId + 1 !== slideNow) { 
            translateWidth = -$('#viewport').width() * (navBtnId); 
            $('#slidewrapper').css({ 
                'transform': 'translate(' + translateWidth + 'px, 0)', 
                '-webkit-transform': 'translate(' + translateWidth + 'px, 0)', 
                '-ms-transform': 'translate(' + translateWidth + 'px, 0)', 
            }); 
            slideNow = navBtnId + 1; 
        } 
    }); 
});

#block-for-slider { 
    position: fixed; 
    width: 100%; 
    margin: 0 auto; 
} 
 
#viewport { 
    width: 100%; 
    display: table; 
    position: relative; 
    overflow: hidden; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    -o-user-select: none; 
    user-select: none; 
} 
 
#slidewrapper { 
    position: relative; 
    width: calc(100% * 4); 
    top: 0; 
    left: 0; 
    margin: 0; 
    padding: 0; 
    -webkit-transition: 1s; 
    -o-transition: 1s; 
    transition: 1s; 
    -webkit-transition-timing-function: ease-in-out; 
    -o-transition-timing-function: ease-in-out; 
    transition-timing-function: ease-in-out; 
} 
 
#slidewrapper ul, #slidewrapper li { 
    margin: 0; 
    padding: 0; 
} 
 
#slidewrapper li { 
    width: calc(100%/4); 
    list-style: none; 
    display: inline; 
    float: left; 
    position: relative; 
} 
 
.slide img { 
    width: 100%; 
} 
 
.slide>p { 
    position: absolute; 
    top: 25px; 
    left: 535px; 
    color: white; 
    font: italic 400 22px 'Noto Serif', serif; 
} 
 
.window { 
    background-color: white; 
    width: 600px; 
    height: 250px; 
    border-radius: 5px; 
    position: absolute; 
    left: 390px; 
    top: 120px; 
} 
 
.window>p:first-child { 
    text-align: center; 
    padding: 5px; 
    font-family: "Museo Sans Cyrl 900"; 
    font-size: 14px; 
    margin-top: 30px; 
    letter-spacing: 4px; 
    color: #fab330; 
} 
 
.window>p:last-child { 
    text-align: center; 
    font: italic 400 30px 'Noto Serif', serif; 
    font-size: 30px; 
    color: #282828; 
} 
 
#button>a { 
    border: 1px solid #fab330; 
    border-radius: 4px; 
    background-color: #fab330; 
    color: white; 
    text-decoration: none; 
    padding: 15px 35px; 
    position: absolute; 
    left: 580px; 
    top: 300px; 
    letter-spacing: 4px; 
    font-family: "Museo Sans Cyrl 900"; 
    font-size: 12px; 
    cursor: pointer; 
} 
 
#button>a:hover { 
    text-decoration: none; 
    color: white; 
} 
 
#prev-btn, #next-btn { 
    position: absolute; 
    width: 50px; 
    height: 50px; 
    color: white; 
    font-size: 30px; 
    border-radius: 50%; 
    top: calc(50% - 35px); 
} 
 
#prev-btn:hover, #next-btn:hover { 
    cursor: pointer; 
} 
 
#prev-btn { 
    left: 20px; 
} 
 
#next-btn { 
    right: 20px; 
} 
 
.nav_btn { 
    position: absolute; 
    width: 100%; 
    bottom: 20px; 
    padding: 0; 
    margin: 0; 
    text-align: center; 
} 
 
.nav_btn input { 
    display: none; 
} 
 
.nav_btn label { 
    display: inline-block; 
    height: 10px; 
    width: 10px; 
    border-radius: 50%; 
    border: 2px solid white; 
    cursor: pointer; 
    margin: 3px; 
    padding: 5px; 
} 
 
#button1:checked ~ #hw1, 
#button2:checked ~ #hw2, 
#button3:checked ~ #hw3 { 
    background: #fff; 
}

<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <link href="https://fonts.googleapis.com/css?family=Noto+Serif:400i" rel="stylesheet"> 
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous"> 
 
  <body> 
    <div id="block-for-slider"> 
 
      <div id="viewport"> 
 
        <ul id="slidewrapper"> 
 
          <li class="slide"> 
            <img src="https://pp.userapi.com/c849532/v849532174/1edc9/P8GoQZrNnos.jpg" alt="1" class="slide-img"> 
            <p>Пусть всегда будет вкусно!</p> 
 
            <div class="window"> 
              <p>— КУЛИНАРНЫЙ КЛУБ —</p> 
              <p>Создай свой кулинарный шедевр вместе с соусами Камако</p> 
            </div> 
 
            <div id="button"> 
              <a href="">УЗНАТЬ БОЛЬШЕ</a> 
            </div> 
          </li> 
 
          <li class="slide"> 
            <img src="https://pp.userapi.com/c849532/v849532174/1edc9/P8GoQZrNnos.jpg" alt="2" class="slide-img"> 
          </li> 
 
          <li class="slide"> 
            <img src="https://pp.userapi.com/c849532/v849532174/1edc9/P8GoQZrNnos.jpg" alt="3" class="slide-img"> 
          </li> 
 
        </ul> 
 
        <div id="prev-next-btns"> 
          <i id="prev-btn" class="fas fa-angle-left"></i> 
          <i id="next-btn" class="fas fa-angle-right"></i> 
        </div> 
 
        <div class="nav_btn"> 
          <input type="radio" name="slider" id="button1" checked> 
          <input type="radio" name="slider" id="button2"> 
          <input type="radio" name="slider" id="button3"> 
          <label id="hw1" for="button1"></label> 
          <label id="hw2" for="button2"></label> 
          <label id="hw3" for="button3"></label> 
        </div> 
 
      </div> 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>