title: jQuery radio button events
body: <p>Ive just started learning jQuery. I made a simple slider and i can't figure out how to put events on radio buttons properly in the way when i click on them, my ul would move margin-left on "-1*width_of_single_slide*radio_btn_value". It means when i click on first radio button(radio with value=0), the list would show the first slide and so on.. Or is there an easy way to make it without givin each of radio its value?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="slider"&gt;
      &lt;ul class="slides"&gt;
          &lt;li class="slide"&gt;&lt;img src="../img/bg1.jpg"&gt;&lt;/li&gt;
          &lt;li class="slide"&gt;&lt;img src="../img/bg2.jpg"&gt;&lt;/li&gt;
          &lt;li class="slide"&gt;&lt;img src="../img/bg3.jpg"&gt;&lt;/li&gt;
          &lt;li class="slide"&gt;&lt;img src="../img/bg4.png"&gt;&lt;/li&gt;
          &lt;li class="slide"&gt;&lt;img src="../img/bg5.jpg"&gt;&lt;/li&gt;
          &lt;li class="slide"&gt;&lt;img src="../img/bg6.jpg"&gt;&lt;/li&gt;
          &lt;li class="slide"&gt;&lt;img src="../img/bg7.jpg"&gt;&lt;/li&gt;
          &lt;li class="slide"&gt;&lt;img src="../img/bg8.jpg"&gt;&lt;/li&gt;
          &lt;li class="slide"&gt;&lt;img src="../img/bg9.png"&gt;&lt;/li&gt;
          &lt;li class="slide"&gt;&lt;img src="../img/bg1.jpg"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;form action="" id="pointers"&gt;
      &lt;input type="button" id="left" value="Left"&gt;
      &lt;input type="button" id="right" value="Right"&gt; &lt;/form&gt;
  &lt;div action="" id="lowerBar"&gt;
      &lt;form action="" class="stop"&gt;
          &lt;input type="button" value="pause" id="pause"&gt; &lt;/form&gt;
      &lt;form action="" id="choices"&gt;
          &lt;input type="radio" name="changeBg" value="0"&gt;
          &lt;input type="radio" name="changeBg" value="1"&gt;
          &lt;input type="radio" name="changeBg" value="2"&gt;
          &lt;input type="radio" name="changeBg" value="3"&gt;
          &lt;input type="radio" name="changeBg" value="4"&gt;
          &lt;input type="radio" name="changeBg" value="5"&gt;
          &lt;input type="radio" name="changeBg" value="6"&gt;
          &lt;input type="radio" name="changeBg" value="7"&gt;
          &lt;input type="radio" name="changeBg" value="8"&gt; &lt;/form&gt;
      &lt;form action="" style="width: 40px"&gt;&lt;/form&gt;
  &lt;/div&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>JavaScript:</p>
  
  <pre><code>$(function () {
  let width = 720;
  let animationSpeed = 1000;
  let pause = 3000;
  let currentSlide = 1;
  let $slider = $('#slider');
  let $slideContainer = $slider.find('.slides');
  let $slides = $slideContainer.find('.slide')
  let interval;
  
  function startSlider() {
      interval = setInterval(function () {
          $slideContainer.animate({
              'margin-left': '-=' + width
          }, animationSpeed, function () {
              currentSlide++;
              if (currentSlide == $slides.length) {
                  currentSlide = 1;
                  $slideContainer.css('margin-left', 0);
              }
          });
      }, pause);
  }
  
  function pauseSlider() {
      clearInterval(interval);
  }
  $('#pause').click(pauseSlider);
  $('#left').click(function () {
      $slideContainer.animate({
          'margin-left': '+=' + width
      }, animationSpeed);
  });
  $('#right').click(function () {
      $slideContainer.animate({
          'margin-left': '-=' + width
      }, animationSpeed);
  });
  console.log($('input[type="radio"]'));
  
      for(let i =0; i&lt;$('input[type="radio"]').length;i++) {
          $('input[type="radio"]')[i].click(function(){
              $slideContainer.animate({'margin-left': '='+width},animationSpeed);
          })
      }
  
  $('input[type="radio"]').change(function () {
      if ($('input[type="radio"]').prop("checked", true)) {
          $slideContainer.animate({'margin-left': '-'+width*$('input[type="radio"]').val()},animationSpeed);
      }
  });
  startSlider();
  </code></pre>
  
  <p>})</p>