キャサリンPerovic：

私はそれが目的のスライドを表示するように、ラジオボタンのクリックで、要素のマージンが変わるだけCSSを使用して、簡単なスライドショーを作りました。あなたはそれが以下のコードでどのように動作するかを確認することができます。また、私はJavaScriptを使用して、このスライドショー自動再生を行いました。このスクリプトは、リスト3秒ごとに横のラジオボタンをチェックします。

今私はスライドショー自動再生をするために助けが必要ループにしても、手動で任意のラジオボタンをチェックしたときにストップ自動再生。

$(document).ready(function() {

  function autoplay() {
$("input[name=radio-button]:checked").nextAll(':radio:first').prop('checked', true);
  };
  
  setInterval(autoplay, 3000);

});

body {
margin: 0;
padding: 0;
}

.slider {
  width: 300%;
  transition: margin 1s;
  height: 100px;
}

#radio-button1:checked ~ .slider {
  margin-left: 0%;
}

#radio-button2:checked ~ .slider {
  margin-left: -100%;
}

#radio-button3:checked ~ .slider {
  margin-left: -200%;
}

.slider-item {
  float: left;
  width: 33.33%;
  height: 100%;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<input type="radio" name="radio-button" id="radio-button1" checked />
<input type="radio" name="radio-button" id="radio-button2" />
<input type="radio" name="radio-button" id="radio-button3" />

<div class="slider">
  <div class="slider-item" style="background: #F00"></div>
  <div class="slider-item" style="background: #0F0"></div>
  <div class="slider-item" style="background: #00F"></div>
</div>

C. Buljan手：

作成しcurr、変数を区間内でそれをインクリメントし、モジュロを使用し%、0に戻ってループにそれを：

jQuery(function($) { // DOM ready and $ alias in scope

  var curr = 0;

  function autoplay() {
    curr = ++curr % 3; // Increment and Reset to 0 when 3
    $("[name=radio-button]")[curr].checked = true;
  }

  setInterval(autoplay, 3000);

});

body {
  margin: 0;
  padding: 0;
}

.slider {
  width: 300%;
  transition: margin 1s;
  height: 100px;
}

#radio-button1:checked~.slider {
  margin-left: 0%;
}

#radio-button2:checked~.slider {
  margin-left: -100%;
}

#radio-button3:checked~.slider {
  margin-left: -200%;
}

.slider-item {
  float: left;
  width: 33.33%;
  height: 100%;
}

<input type="radio" name="radio-button" id="radio-button1" checked />
<input type="radio" name="radio-button" id="radio-button2" />
<input type="radio" name="radio-button" id="radio-button3" />

<div class="slider">
  <div class="slider-item" style="background: #F00"></div>
  <div class="slider-item" style="background: #0F0"></div>
  <div class="slider-item" style="background: #00F"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

より良い方法：

あなたはスクロールバーを得ることはありませんので、スーパーの親をオーバーフロー
使用display: flex;するのではなく、醜い山車。
使用$('.slider').each(1つのページに複数のスライダを持つことができるように！
作成anim() play()し、stop()何が起こるかを制御する機能を。
使用アニメーションtransform:とtransition遷移がGPUであるためには、加速しました。余白ながらでないと、リフローとリペイントを要求します。
アニメイト使用して変換curr * -100％を
使用するcurr %= totループバックする（モジュロ演算子）をcurr必要なときに0にインデックスを。
なぜ手動でボタンを作成しますか？手動でスライドを作成し、JSはあなたのためのボタンを作成してみましょう。
使用するsetInterval変数にそれを格納することにより、itv
あなたの自動アニメーションの使用を停止するには clearInterval(itv)
利用.hover(stop, play)mouseleave上のMouseEnterと自動再生の停止へ

$('.slider').each(function(slider_idx) { // Use each, so you can have multiple sliders

  let curr = 0;             // Set current index
  let itv = null;           // The interval holder
  
  const $slider = $(this);
  const $nav    = $('.slider-nav', $slider);
  const $items  = $('.slider-items', $slider);
  const $item   = $('.slider-item', $slider);
  const tot = $item.length; // How many
  const btns = [...new Array(tot)].map((_, i) => $('<input>', {
    type: 'radio',
    name: `slider-btn-${slider_idx}`,
    checked: curr == i,
    change() { // On button change event
      curr = i; // Set current index to this button index
      anim();
    }
  })[0]);
    
  function anim() {
    $items.css({transform: `translateX(-${curr*100}%)`}); // Animate
    btns[curr].checked = true; // Change nav btn state
  }

  function play() {
    itv = setInterval(() => {
      curr = ++curr % tot; // increment curr and reset to 0 if exceeds tot
      anim(); // and animate!
    }, 3000); // Do every 3sec
  }
  
  function stop() {
    clearInterval(itv);
  }

  $nav.empty().append(btns);   // Insert buttons
  $slider.hover(stop, play);   // Handle hover state
  play();                      // Start autoplay!

});

/*QuickReset*/ * {margin: 0; box-sizing: border-box;}

.slider {
  position: relative;
  height: 100px;
}

.slider-overflow {
  overflow: hidden; /* use an overflow parent! You don't want scrollbars */
  height: inherit;
}

.slider-items {
  display: flex; /* Use flex */
  flex-flow: row nowrap;
  height: inherit;
  transition: transform 1s; /* Don't use margin, use transform */
}

.slider-item {
  flex: 0 0 100%;
  height: inherit;
}

.slider-nav {
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
}

<div class="slider">

  <div class="slider-overflow">
    <div class="slider-items"> <!-- This one will transition -->
      <div class="slider-item" style="background:#0bf;">curr = 0</div>
      <div class="slider-item" style="background:#fb0;">curr = 1</div>
      <div class="slider-item" style="background:#f0b;">curr = 2</div>
    </div>
  </div>
  
  <div class="slider-nav">
    <!-- JS will populate buttons here -->
  </div>
  
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

DIV要素の両方だから.slider-navと.slider-overflow必要性が共通の親の内部のように.slider-私たちは、適切にそれらの要素との相互作用の後に（一時停止）自動アニメーションを停止すること。

JavaScriptでCSSスライドショー自動再生を有効にします

より良い方法：

おすすめ