Custom Slider (Toggle Slider) not working using jquery

Question

Working on Jquery (Toggle Slider).

• On load, the left button should be disabled (currently not working).
• After first click, the right button then left button should be enabled.
• When we get to the last slide, the right button should be disabled. (Currently not working)
• When the slide goes to first position the slide shouldn't move again
• the same for last slide also

Here is my jQuery code for reference.

 $(".leftBtn").click(function(e) { goRight(); }); $(".rightBtn").click(function(e) { goLeft(); }); function goRight() { // inner stuff slides left var initalLeftMargin = $(".innerLiner").css('margin-left').replace("px", "") * 1; var newLeftMargin = (initalLeftMargin - 204); // extra 2 for border $(".innerLiner").animate({ marginLeft: newLeftMargin }, 500); } function goLeft() { // inner stuff slides right var initalLeftMargin = $(".innerLiner").css('margin-left').replace("px", "") * 1; var newLeftMargin = (initalLeftMargin + 204); // extra 2 for border if (newLeftMargin >= 0){ $(".leftBtn").css("display", "none"); } else { $(".leftBtn").css("display", "block"); } $(".innerLiner").animate({ marginLeft: newLeftMargin }, 500); } 

 * { Box-sizing: Border-box } .mycontainer { white-space: nowrap; overflow-x: hidden; width: 204px; } .box { display: inline-block; border: 2px black solid; padding: 20px; width: 200px; height: 100px; vertical-align: top; background-color: pink; } .box2 { background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input class="rightBtn" type="button" value="Left"> <div class="mycontainer"> <div class="innerLiner"> <span class="box"> This is box1 </span> <span class="box"> This is box2 </span> <span class="box box2"> This is box3 </span> </div> </div> <input class="leftBtn" type="button" value="Right"> 

Answer 1

You are moving to the correct direction. Here are some tips to fix the code:

1. Move the button update code to a function to make it easy to update and call.
2. Show both buttons by default, and hide the correct one depending on new margin.
3. Call the function with initial margin to disable the correct initial button, before user click anything.

In short,

function updateButtons( newLeftMargin ) {
  $(".leftBtn,.rightBtn").show(); // Show both buttons by default
  if ( newLeftMargin >= 0 )
    $(".rightBtn").hide();
  if ( newLeftMargin <= -408 )
    $(".leftBtn").hide();
}
updateButtons(0)

Below is a complete snippet. Note that I took the liability to lightly optimise your other code.

 function goRight() { // inner stuff slides left var initalLeftMargin = parseInt( $(".innerLiner").css('margin-left') ); var newLeftMargin = (initalLeftMargin - 204); // extra 2 for border updateButtons( newLeftMargin ); $(".innerLiner").animate({ marginLeft: newLeftMargin }, 500); } function goLeft() { // inner stuff slides right var initalLeftMargin = parseInt( $(".innerLiner").css('margin-left') ); var newLeftMargin = (initalLeftMargin + 204); // extra 2 for border updateButtons( newLeftMargin ); $(".innerLiner").animate({ marginLeft: newLeftMargin }, 500); } function updateButtons( newLeftMargin ) { $(".leftBtn,.rightBtn").show(); // Show both buttons by default if ( newLeftMargin >= 0 ) $(".rightBtn").hide(); if ( newLeftMargin <= -408 ) $(".leftBtn").hide(); } updateButtons(0) $(".leftBtn").click( goRight ); $(".rightBtn").click( goLeft ); 

 * { Box-sizing: Border-box } .mycontainer { white-space: nowrap; overflow-x: hidden; width: 204px; } .box { display: inline-block; border: 2px black solid; padding: 20px; width: 200px; height: 100px; vertical-align: top; background-color: pink; } .box2 { background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input class="rightBtn" type="button" value="Left"> <div class="mycontainer"> <div class="innerLiner"> <span class="box"> This is box1 </span> <span class="box"> This is box2 </span> <span class="box box2"> This is box3 </span> </div> </div> <input class="leftBtn" type="button" value="Right">