How to create a slider menu in html, css, and javascript

Question

New to web dev here. I'm interested in creating a "slider menu" of some sort where users to be able to view and select from one of the options by clicking on the next or previous buttons (example pic attached). I have written some basic html but I'm not entirely sure how to implement this with javascript. Any help would be appreciated

example

<div class = navigationButtons>
  <button class = "prev"> < </button>
</div>

<div class = "select options">
  <div class="o1">
    <button> option1 </button>
  </<div >

  <div class="o2">
    <button> option2 </button>
  </<div >

 <div class="o3">
    <button> option3 </button>
 </div>

 <div class="o4">
    <button> option4 </button>
 </div>
</div>

  <div class = navigationButtons>
    <button class = "next"> > </button>
  </div>

Answer 1

did you mean this:

 var option = 1; //next document.getElementById("Next").addEventListener("click",displayNext); function displayNext(){ document.getElementById("o"+option).style.display="none"; option= (option<4)? option+1: 1; document.getElementById("o"+option).style.display="block"; } //previous document.getElementById("Previous").addEventListener("click",displayPrevious); function displayPrevious(){ document.getElementById("o"+option).style.display="none"; option= (option>1)? option-1: 4; document.getElementById("o"+option).style.display="block"; }

 .navigationButtons{ float:left; margin-right:20px; margin-left:20px; }.container{ margin-left: auto; text-align:center; } #o1{ display:block; float:left} #o2{ display:none; float:left} #o3{ display:none; float:left} #o4{ display:none; float:left}

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <div class="container "> <button class = " navigationButtons" id="Previous"> < </button> <div class = "selectOptions "> <button id="o1"> option1 </button> <button id="o2"> option2 </button> <button id="o3"> option3 </button> <button id="o4"> option4 </button> <button class = " navigationButtons" id="Next"> > </button> </div> </div> </body> <script src="script.js"> </script> </html>

How to create a slider menu in html, css, and javascript

Question

1 answers

solution1
0 2019-10-31 03:24:57

How to create a slider menu in html, css, and javascript

Question

1 answers

solution1 0 2019-10-31 03:24:57

solution1
0 2019-10-31 03:24:57