Slides

{ photos by me ✓ }

The markup:

<div class="slideshow-container" style="max-width: 740px;">

<div class="mySlides fade">
<div><img src="img/cms-boat-slide-01.jpg" width="740" height="560" alt=""></div>
<p>Caption (1)</p>
</div>

<div class="mySlides fade">
<div><img src="img/cms-boat-slide-02.jpg" width="740" height="560" alt=""></div>
<p>Caption (2)</p>
</div>

<div class="mySlides fade">
<div><img src="img/cms-boat-slide-03.jpg" width="740" height="560" alt=""></div>
<p>Caption (3)</p>
</div>

<div><a class="prev" onclick="plusSlides(-1)">&#10094;</a></div>
<div><a class="next" onclick="plusSlides(1)">&#10095;</a></div>

</div>

<div class="dotcontainer">
<div class="bullets">
<span class="dot" onclick="currentSlide(1)"></span><span class="dot" onclick="currentSlide(2)"></span><span class="dot" onclick="currentSlide(3)"></span>
</div>
</div>

Edit the brown bits, making sure all the images are the same size and that max-width is the same as width (740 max). The caption paragraphs are <p>optional</p>.

The dots (dotcontainer) is also optional. Use only as many dots (the third shown blue) as there are images.

Information

Page last modified: 29 June, 2024