Guide to making a slider menu using html, css, and javascript

Question

Guide to making a slider menu using html, css, and javascript

Just dipping my toes into the world of web development. I'm intrigued by the idea of creating a "slider menu" where users can view and select options by clicking on next or previous buttons (see example image below). While I've got some basic HTML down, I'm struggling with how to implement this using JavaScript. Any guidance or assistance would be greatly appreciated!

View 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>

javascript html css

Answer 1

Answer №1

did you mean this:

var selection = 1;
//next
document.getElementById("Next").addEventListener("click",displayNext);
function displayNext(){
document.getElementById("o"+selection).style.display="none";
selection= (selection<4)? selection+1 : 1;
document.getElementById("o"+selection).style.display="block";

}
//previous
document.getElementById("Previous").addEventListener("click",displayPrevious);
function displayPrevious(){
document.getElementById("o"+selection).style.display="none";
selection= (selection>1)? selection-1 : 4;
document.getElementById("o"+selection).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>

Answer 2

did you mean this:

var selection = 1;
//next
document.getElementById("Next").addEventListener("click",displayNext);
function displayNext(){
document.getElementById("o"+selection).style.display="none";
selection= (selection<4)? selection+1 : 1;
document.getElementById("o"+selection).style.display="block";

}
//previous
document.getElementById("Previous").addEventListener("click",displayPrevious);
function displayPrevious(){
document.getElementById("o"+selection).style.display="none";
selection= (selection>1)? selection-1 : 4;
document.getElementById("o"+selection).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>

Guide to making a slider menu using html, css, and javascript

Answer №1

Similar questions

.fetchevery(...).then has no function

Error message: The call stack size has surpassed the limit, resulting in a RangeError. This issue is

How do I handle the error "Uncaught TypeError: Cannot read property 'func' of undefined in React JS

Having trouble with overriding an @media query for material-ui react components?

Here is a method to transform the JSON object into a string as demonstrated below:

conceal the offspring from the guardians, not the offspring

Using jQuery's .html() method will remove the selected attribute from the dropdown menu option

Issue with Braintree Integration - custom form failing to generate nonce

Anticipating the arrival of the requested data while utilizing Ajax sending

How can one retrieve the 'alt' attribute text from an image tag on a webpage using the JSOUP library in an Android application?

What steps can be taken to avoid the appearance of the JavaScript prompt "Leaving site"?

Problems with form functionality in React component using Material UI

Access another page by clicking on a link within an HTML document

Delay loading of external JavaScript with data attributes

Problems with Navbar rendering on multiple occasions

When you hover over them, Material UI icons shrink in size due to the Border

NodeJS Socket not transmitting file after connection with client

a tutorial on linking component data to a prop value

Rotate CSS elements dynamically using jQuery

Node.js - Error: JSON.Parse and JSON.Stringify are not recognized as functions