Need navigation buttons for HTML Slideshow

JavaScript
1

So I’m making a slide show for a specific page on my website.
I have the “previous” and “next” buttons worked out:

<button class="w3-btn" onclick="plusDivs(-1)">❮ Prev</button>
<button class="w3-btn" onclick="plusDivs(1)">Next ❯</button>

What I’m trying to create are buttons that show the very first, very last, and a completely random image, if that’s even possible. Is this even possible using the code I have here?:

<p><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"></p>

<div class="w3-content" style="max-width:900px;position:relative">

<img class="mySlides" src="IMG URL" style="width:100%"/><img class="mySlides" src="IMG URL" style="width:100%"/><img class="mySlides" src="IMG URL" style="width:100%"/><img class="mySlides" src="IMG URL" style="width:100%"/><div class="w3-center">
  <div class="w3-section">


    
    <button class="w3-btn" onclick="plusDivs(-1)">❮ Prev</button>
   
    <button class="w3-btn" onclick="plusDivs(1)">Next ❯</button>
 


  </div>
  
</div>

</div>

</div>

<script language="JavaScript">
var numRand = Math.floor(Math.random() * 101);
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length} ;
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script>

Sorry if this I posted this incorrectly. I’m new to this forum.

2

Welcome to the forums, @aguy123.

Not an answer to the question, I’m afraid, but when I was formatting your code for you just now I noticed

<p><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"></p>

Do you really have that on your page? The meta tag and link should be in the <head> of your document, not wrapped in <p> tags in the body.

Off-Topic

For future reference, there are a couple of ways to post code here so that it displays correctly.

You can highlight your code, then use the </> button in the editor window, which will format it.

Or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

1 Like
3

Moved to Js forum as question is more pertinent there :slight_smile:

2 Likes
4

Hi @aguy123! Sure, just analogously to your other click handlers:

// first slide
slideIndex = 1;
showDivs(slideIndex);

// etc.

BTW, I’d suggest to avoid using inline styles and scripting. Also, language="JavaScript" is a bit outdated – use type="text/javascript" instead. Unsolicited advice over. :-)

5

When I put the code within <head> and </head> the style of the navigation goes from this this:

921×436 476 KB

to this:

935×391 478 KB
.

I’d like to keep it looking like the former. Is there any way to do that using <head>?

6

The meta tag and link belong in the header. If moving them to the correct place is causing problems, then there must be some other issue at play here. Did you remember to delete the <p> tags when you moved them?

Run your page through the validator to check for other errors. https://validator.w3.org/ If the problem persists, then either post a link to a live site, or post your full HTML and CSS for that page, so we can take a look.

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.