timer - Variables in my simple jQuery slider are not working as expected. Could anyone take a look? -

so, had need of very, simple image slider. instead of wrestling far capable plugin, thought i'd write one.

i've put fiddle here

there container div 620px wide, , internal div 1240px wide. half of in view @ 1 time, , animate left attribute of internal div. foo moves first slide, , bar humbug moves second one. works fine.

so, asked add timer in. so, every 5 seconds should go other slide, whichever 1 is. if move other slide manually, waits bit longer before moving again. being general programming n00b, tried ifs , variables, seemed make sense me.

however, in here doesn't work. happily moves second slide, never move itself. i'm assuming variables not being read within various functions, changed, , console.logs report correct number. perhaps ifs aren't reading variables. frankly, i'm little lost move here. appreciated. thank you.

i've added code below incase fiddle doesn't work someone, or incase prefer have inline here.

here's javascript

$(document).ready(function() {      var speed = 5000;     var timeron = 0;     var slidenumber = 1;     console.log(slidenumber)      function slidetimer()      {           if (timeron = 1) {              if (slidenumber=1) {                 gotoslide2();                 console.log(slidenumber)             }              else if (slidenumber=2) {                 gotoslide1();                 console.log(slidenumber)             }          };      }      function gotoslide2()     {         $('#slider_arrow').animate({left: '375px'}, 400);         $('#slider_content').animate({left: '-620px'}, 400, function(){             slidenumber=2;             window.settimeout(function()             {                 timeron = 1;             }, speed);         });     }      function gotoslide1()     {         $('#slider_arrow').animate({left: '75px'}, 400);         $('#slider_content').animate({left: '0px'}, 400, function(){             slidenumber=1;             window.settimeout(function()             {                 timeron = 1;             }, speed);         });     }           $('#isr_title span.slider_button.foo').click(function() {         timeron = 0;         gotoslide1();     });      $('#isr_title span.slider_button.bar_humbug').click(function() {         timeron = 0;         gotoslide2();     });      window.setinterval(         function()         {         slidetimer();         }, 4000);   }); 

here's html

<div id="main" role="main" class="clearfix">     <div id="branding_section_buttons">         <h1 id="isr_title"><span class="slider_button foo">foo</span> <span class="slider_button bar_humbug"> bar humbug</span></h1>         <div id="slider_arrow" class="target_independent">         </div>     </div>   <div id="slider">                 <div id="slider_content" class="clearfix">                     <p>our <span class="highlight">lorem</span> ipsum lorem ipsum lorem ipsum lorem ipsum <span class="highlight">lorem</span> ipsum <span class="highlight">lorem</span> ipsum.</p>                     <img src="http://placekitten.com/280/200" alt="" width="280" height="200">                     <p style="color: red;">our <span class="highlight">lorem</span> ipsum lorem ipsum lorem ipsum lorem ipsum <span class="highlight">lorem</span> ipsum <span class="highlight">lorem</span> ipsum.</p>                     <img src="http://placekitten.com/280/200" alt="" width="280" height="200">                 </div>         </div> 

here's relevant css

#slider {     position: relative;     width: 600px;     margin-bottom: 20px;     margin-right: 20px;     overflow:hidden;     height: 200px; }  #slider_content {     width: 1240px;     position: absolute;  }  #slider_content p, #slider_content img {     float: left;     width: 300px; }  #slider_content p {     font-size:182%;     line-height: 1.2;     font-weight: 300; }  #slider_content p span.highlight {     font-weight: 700;     color: #445daa; }  #slider_content img {     margin-right: 20px; }  #slider_content {     width: 1240px;     position: absolute;  }  #slider_content p, #slider_content img {     float: left;     width: 300px; }  #slider_content p {     font-size:182%;     line-height: 1.2;     font-weight: 300; }  #slider_content p span.highlight {     font-weight: 700;     color: #445daa; }  #slider_content img {     margin-right: 20px; } 

in variable declarations top, start out timeron = 1, change of if statements use double equal signs instead of singles.

that seemed work on fiddle.