A Micro 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="" class="bgmaxw1">
</div>

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

<div class="mySlides fade">
<img src="img/image3.jpg" width="740" height="720" alt="" class="bgmaxw0">
</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">
<div><img src="img/image1.jpg" width="740" height="570" alt=""></div>
<p>Caption 1</p>
</div>

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

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

As well as the captions, note the additional div tags.

Information »

Page last modified: 04 December, 2020