title: Jquery slider not stoping when pause /play is clicked
body: <p>I am coding a simple jquery slider, currently I cant get it to start when I click the play/pause button,  am using an if and a stop = false state to start the slider but cant get it to work, the code is fairly simple but I am a bit of a newbie in js.</p>
  
  <p>The swapslides function does its job, its the condition checker where the code breaks.</p>
  
  <p>You can take a look at the code here:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  $(document).ready(function(){
      var stop = true;
  
      
  
      $('.play').click(function(){
    if (stop == true) {
          stop = false;
    alert(stop);
          }
          else {
          stop = true;
    alert(stop);
          }
      });
   
   if(stop == false){
   setInterval(swapSlides, 3000);
   }
   
   
      function swapSlides(){
   var cs = $('div.currentslide:first');
   var ns = cs.next();
   if(ns.hasClass('mySlides1')){
   cs.removeClass('currentslide');
   ns.addClass('currentslide');
      }
   else{
   ns = $('#polaroid1').children('div.mySlides1:first');
   cs.removeClass('currentslide');
   ns.addClass('currentslide');
   }
   }
   
  });
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.play{
   position:absolute; 
   left:5px; 
   bottom:5px; 
   cursor:pointer; 
   z-index:10000;
  }
  
  .polaroid1{
   box-shadow: 10px 10px 7px -7px rgba(0, 0, 0, 0.5); 
   -webkit-backface-visibility: hidden; 
   transform: rotate(-8deg); 
   margin-bottom:30px; 
   width:380px; 
   height:320px; 
   background-color:rgba(255, 255, 255, 1.0); 
   text-align:right; 
   padding-top:10px; 
   padding-right:10px; 
   padding-left:10px; 
   padding-bottom:15px; 
   top:15px; 
   left:25px; 
   position:relative;
  }
  
  .photo1{
   width:100%;  
   height:85%; 
   position:relative;
   padding:5px;
  }
  
  .date1{
   margin:0; 
   padding-right:10px; 
   font-family: 'Covered By Your Grace', cursive; 
   transform: rotate(-5deg);
   font-size:28px;
  }
  
  .mySlides1{
   display:none;
   width:380px; 
   height:320px; 
   position:absolute; 
   top:0px; 
   left:0px;
  }
  
  .currentslide{display:block;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="polaroid1" class="polaroid1"&gt;
    &lt;img class="play" src="images/heart.png"&gt;
    &lt;div class="mySlides1 fade currentslide"&gt;
      &lt;img class="photo1" src="images/IMG-20170610-WA0028.jpg"&gt;
      &lt;h3 class="date1"&gt;22-05-2017&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="mySlides1 fade"&gt;
      &lt;img class="photo1" src="images/20170812_181516.jpg"&gt;
      &lt;h3 class="date1"&gt;12-08-2017&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="mySlides1 fade"&gt;
      &lt;img class="photo1" src="images/20170522_112958.jpg"&gt;
      &lt;h3 class="date1"&gt;22-05-2017&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="mySlides1 fade"&gt;
      &lt;img class="photo1" src="images/IMG-20170610-WA0017.jpg"&gt;
      &lt;h3 class="date1"&gt;10-06-2017&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="mySlides1 fade"&gt;
      &lt;img class="photo1" src="images/20170819_194526.jpg"&gt;
      &lt;h3 class="date1"&gt;19-08-2017&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="mySlides1 fade"&gt;
      &lt;img class="photo1" src="images/20170811_182103.jpg"&gt;
      &lt;h3 class="date1"&gt;11-08-2017&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="mySlides1 fade"&gt;
      &lt;img class="photo1" src="images/20170522_124602.jpg"&gt;
      &lt;h3 class="date1"&gt;22-05-2017&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="mySlides1 fade"&gt;
      &lt;img class="photo1" src="images/20170419_020725.jpg"&gt;
      &lt;h3 class="date1"&gt;19-04-2017&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="mySlides1 fade"&gt;
      &lt;img class="photo1" src="images/20170520_115819.jpg"&gt;
      &lt;h3 class="date1"&gt;20-05-2017&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="mySlides1 fade"&gt;
      &lt;img class="photo1" src="images/20170822_011703.jpg"&gt;
      &lt;h3 class="date1"&gt;22-08-2017&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="mySlides1 fade"&gt;
      &lt;img class="photo1" src="images/20170705_184344.jpg"&gt;
      &lt;h3 class="date1"&gt;05-07-2017&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>