スライドショーがうまく機能しないのでちゃんと動くようにしたい

Question

html

    <div id="slide">
      <ul class="">
        <li>a</li>
        <li>b</li>
        <li>c</li>
      </ul>
    </div>
    <buttn id="pre">左</buttn>
    <buttn id="next">右</buttn>

css

#slide {
  overflow: hidden;
  position: relative;
  height: 500px;

}

ul {
  position: absolute;
  width: 3000px
}

ul li {
  width: 1000px;
  background: #777;
  height: 500px;
  float: left;
  li

js

  <script>
    'use strict';
    $(function() {
      var dir = -1;
      var intervar = 3000;
      var duration = 700;
      var timer;


      $('#slide ul').prepend($('#slide li:last-child'));
      $('#slide ul').css('left', -1000);
      timer = setIntervar(slideTimer, intervar);

      function slideTimer() {

        if (dir == -1) {
          $('#slide ul').animate({
            'left': '-=1000px'
          }, duration, function() {
            $(this).append($('#slide li:first-child'));
            $(this).css('left', -1000);

          });
        } else {

          $('#slide ul').animate({
            'left': '+=1000px'
          }, duration, function() {
            $(this).prepend($('#slide li:last-child'));
            $(this).css('left', -1000);
            dir = -1;
          });

        }


      }

      $('#pre').click(function() {
        dir = 1;

        clearInterval(timer);
        timer = setInterval(slideTimer, interval);

        slideTimer();
      });

      $('#next').click(function() {
        dir = -1;


        clearInterval(timer);
        timer = setInterval(slideTimer, interval);

        slideTimer();
      });


    });

コードのどの部分がおかしくて機能しないのか教えていただきたいです。

Comments

[m.ts10806]

どう動かしたいのか要件書かれないとゴールが質問者以外知らない状態ですよ。
それに「うまくいかない」は誰にもなにも伝えない表現です。

[m.ts10806]

あと、コピペで再現できるようにファイルが違う場合はコードブロックわけてください

[退会済みユーザー]

ボタン要素をクリックするとul要素の中身がスライドされるようにスライドショーとして動くようにしたいのですが、ボタンを押しても無反応の状態です。

[Lhankor_Mhy]

エラーメッセージや実行ログをコピー&ペーストしましょう | 質問するときのヒント｜teratail（テラテイル）
https://teratail.com/help/question-tips#questionTips3-4-2

Answer 1

typoが3か所あります。

    $(function() {
      var dir = -1;
      var intervar = 3000;  // typo
      var duration = 700;
      var timer;


      $('#slide ul').prepend($('#slide li:last-child'));
      $('#slide ul').css('left', -1000);
      timer = setIntervar(slideTimer, intervar);  // typo*2

　
解決方法は、書いたコードをよく見直すことと、エラーメッセージをよく読むことです。