display

 <div >
                <div >
                  <input type="radio" name="radio-button" id="radio1">
                  <input type="radio" name="radio-button" id="radio2">
                  <input type="radio" name="radio-button" id="radio3">
                  <input type="radio" name="radio-button" id="radio4">
                  <input type="radio" name="radio-button" id="radio5">
                  <input type="radio" name="radio-button" id="radio6">
<div>
        

                  <div id="next"><</div>
                    <div id="previous">></div>

                  <div >
                  <label for="radio1" ></label>
                  <label for="radio2" ></label>
                  <label for="radio3" ></label>
                  <label for="radio4" ></label>
                  <label for="radio5" ></label>
                  <label for="radio6" ></label>
                </div>
</div

  var counter = 1;
  setInterval(function()
  {document.getElementById('radio'   counter).checked = true;
  counter  ;
  if(counter > 6){
    counter = 1;
  }
}, 5000);

I want to add the button next/previous function to my slider but I'm confused about writing the code, does anyone want to help?

CodePudding user response：

Please refer to below javascript link and it will work for you 100%.

Click here

CodePudding user response：

Do like this and check,

<div id="next" onclick="nextClick()"></div>
<div id="previous" onclick="preClick()"></div>

function nextClick(){
    document.getElementById('radio'   counter).checked = true;
    counter  ;
    if(counter > 6){
        counter = 1;
    }
}

function preClick(){
    counter = counter - 2;
    document.getElementById('radio'   counter).checked = true;
    counter  ;
    if(counter > 6){
        counter = 1;
    }
}

Remember counter variable is a global variable.