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>

The question doesn't appear to include any attempt at all to solve the problem. Please edit the question to show what you've tried, and show a specific roadblock you're running into with [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). For more information, please see [How to Ask](https://stackoverflow.com/help/how-to-ask). — Andreas, Oct 31 '19 at 02:15
Please investigate the concept **Pagination**. Refer to these resources: [CSS Pagination](https://www.w3schools.com/howto/howto_css_pagination.asp) , [CSS Pagination Examples](https://www.w3schools.com/css/css3_pagination.asp) , [Boostrap Pagination](https://www.w3schools.com/bootstrap/bootstrap_pagination.asp) , [Javascript Pagination](https://stackoverflow.com/questions/25434813/simple-pagination-in-javascript) — EGC, Oct 31 '19 at 02:18

score 0 · Answer 1 · answered Oct 31 '19 at 03:24

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

1 Answers1