A Micro CMS

Example slideshow

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

<div class="mySlides fade">
<img src="/img/image1.jpg" width="740" height="720" alt="">
</div>

<div class="mySlides fade">
<img src="/img/image2.jpg" width="740" height="720" alt="">
</div>

<div class="mySlides fade">
<img src="/img/image3.jpg" width="740" height="720" alt="">
</div>

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

</div>

Make sure max-width is the same as the width of the images (in pixels).

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

<div class="mySlides fade">
<p class="w"><img src="img/image1.jpg" width="740" height="570" alt=""></p>
<p class="caption">Caption 1</p>
</div>

<div class="mySlides fade">
<p class="w"><img src="img/image2.jpg" width="740" height="570" alt=""></p>
<p class="caption">Caption 2</p>
</div>

<div class="mySlides fade">
<p class="w"><img src="img/image3.jpg" width="740" height="570" alt=""></p>
<p class="caption">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>

Page last modified: 15 February, 2020