title: control CSS margin with javaScript slider
body: <p>I am pretty new to JS and Jquery. I created a simple image carousel that reduces the left-margin of the image so the next one slides in.</p>
  
  <p>I want to control the image carousel with a slider. I think the best way would be to control the size of the left-margin in css with the JS slider.
  Like I said I am a beginner so I am having trouble coming up with a solution to target the left-margin value and update it live with the slider either positive or negative direction.</p>
  
  <p>ex 
  move slider left left-margin reduces move slider right left-margin grows.
  any help would be much appreciate.</p>
  
  <p>thank you so much for your help.</p>
  
  <p>I will include the code I have for the image carousel.</p>
  
  <pre><code>// image slider////////////////////////
  
  $(function(){
   // config
    var width = 720;
    var animationSpeed = 1000;
    var pause = 3000;
    var currentSlide = 1;
  
    //cache DOM
  
    var $slider = $('#slider');
    var $sliderContainer = $slider.find('.slides');
    var $slides = $sliderContainer.find('.slide');
  
    var interval;
  
  
  
    function startSlider(){
      interval = setInterval(function(){
        $sliderContainer.animate({'margin-left': '-=' + width}, animationSpeed, function(){
          currentSlide++;
          if (currentSlide === $slides.length){
              currentSlide = 1;
              $sliderContainer.css('margin-left', 0);
          }
        });
      }, pause);
    }
  
    function stopSlider(){
      clearInterval(interval);
    }
  
    $('#slider').on('mouseenter' , stopSlider).on('mouseleave', startSlider);
  
  startSlider();
  
  });
  
  
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" href="./public/assets/css/main.css"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;starter_build&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;div id = "slider"&gt;
        &lt;ul class="slides"&gt;
          &lt;li class="slide"&gt;&lt;img src="public/assets/images/1.jpg" alt=""&gt;&lt;/li&gt;
          &lt;li class="slide"&gt;&lt;img src="public/assets/images/2.jpg" alt=""&gt;&lt;/li&gt;
          &lt;li class="slide"&gt;&lt;img src="public/assets/images/3.jpg" alt=""&gt;&lt;/li&gt;
          &lt;li class="slide"&gt;&lt;img src="public/assets/images/4.jpg" alt=""&gt;&lt;/li&gt;
          &lt;li class="slide"&gt;&lt;img src="public/assets/images/5.jpg" alt=""&gt;&lt;/li&gt;
          &lt;li class="slide"&gt;&lt;img src="public/assets/images/6.jpg" alt=""&gt;&lt;/li&gt;
          &lt;li class="slide"&gt;&lt;img src="public/assets/images/1.jpg" alt=""&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
  
  
      &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="./public/assets/js/scripts.js"&gt;&lt;/script&gt;
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>