Slideshow Question

HTML & CSS
1

How can I increase the number of slides using this slideshow code, https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto? Thanks.

2

Just add more <div class="mySlides fade"> sections and re-sync the index numbers.
Then add more <span class="dot"></span> to match your amount of slides.

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 6</div>
  <img src="img_nature_wide.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 6</div>
  <img src="img_fjords_wide.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 6</div>
  <img src="img_mountains_wide.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">4 / 6</div>
  <img src="img_nature_wide.jpg" style="width:100%">
  <div class="text">Caption 4</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">5 / 6</div>
  <img src="img_fjords_wide.jpg" style="width:100%">
  <div class="text">Caption 5</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">6 / 6</div>
  <img src="img_mountains_wide.jpg" style="width:100%">
  <div class="text">Caption 6</div>
</div>

</div>

<div style="text-align:center; margin:1em;">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span>
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span>
</div>
1 Like
3

Thank you for your response.

1 Like
4

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