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

Using either Java or Groovy, iterate through a hashmap and showcase an HTML table within a Velocity template

React-Redux - Implement a button toggle functionality to display or hide additional information

Ways to place a background image without using the background-position attribute

Generating intricate JSON structures with JavaScript programming instructions

Shadows are not being cast by ThreeJS

What could be the reason behind getting a useLayoutEffect error when using renderToString to render a Material-UI component?

The content section sits discreetly behind the sidebar

Utilizing CSS classes to namespace pseudo-selectors

A website with two distinct pages, where only the first page is refreshed

Tips to prevent modal impacts on underlying elements?

changing size when hovered over with the mouse is not consistent between entering and exiting

Creating Child Components Dynamically using String Names in ReactJS

How can I add a label to a button group created with Bootstrap?

Paginator for Angular Material Cards

Ways to establish the gradient

Encountered a module build failure due to the inability to resolve the 'bootstrap-sass' module, a required installation when configuring bootstrap version v3

Exploring the ins and outs of console interactions in JavaScript

Utilize jQuery to track and record AdWords conversions

Creating a switch statement that evaluates the id of $(this) element as a case

Implement consistent styling across several elements within a component