$(function () {
  // オプション
  var speed = 300; // スライドの切り替え時間
  var delay = 3000; // 自動再生の待機時間
  var autoPlay = true; // 自動再生の有無

  // タイマー管理用変数
  var timer;

  // スライドコンテンツの数を取得
  var count = $('.js-sliderItem').length;

  // スライドコンテンツの幅を取得
  var slideWidth = $('.js-sliderItem').width();

  // スライドコンテンツを横並びするために必要な幅を計算
  var totalWidth = slideWidth * count;

  // 計算した幅を指定
  $('.js-slider').width(totalWidth);

  // 現在のコンテンツ番号を変数で管理
  var index = 0;

  // 目的のコンテンツまでスライドする関数
  function sliding() {
    // 現在のコンテンツが 「0」より小さいかチェック
    if (index < 0) {
      // 「0」より小さい時
      index = count - 1;
    }

    // 現在のコンテンツが コンテンツの数以上かを確認
    if (index > count - 1) {
      // コンテンツの数より大きい
      index = 0;
    }

    // leftの値をアニメーションで変更
    $('.js-slider').animate({
      left: index * -slideWidth
    }, speed);
  }

  // 自動再生の処理を行う関数
  function setTimer() {
    // 自動再生が有効化チェック
    if (autoPlay) {
      // 有効の時
      timer = setInterval(function () {
        index++;
        sliding();
      }, delay);
    }
  }

  // 自動再生の関数の呼び出し
  setTimer();

  // マウスが乗っている時は自動再生を停止
  $('.js-slider').hover(function () {
    // マウスが乗っている時
    clearInterval(timer);

    // ナビをフェードアウト
    $('.js-sliderNav').fadeOut(300);
  }, function () {
    // マウスが離れた時
    setTimer();

    // ナビをフェードイン
    $('.js-sliderNav').fadeIn(300);
  });

  // 「前へ」ボタンが押されたとき
  $('.js-sliderPrevButton').click(function () {
    // 現在のコンテンツ番号に1を引く
    index--;
    sliding();
  });

  // 「次へ」ボタンが押されたとき
  $('.js-sliderNextButton').click(function () {
    // 現在のコンテンツ番号に1を足す
    index++;
    sliding();
  });
});
