Slides

---

---

This 'slideshow' is adapted from W3 Schools and is not a 'swipe' slider but just as good and very lightweight (my photos).

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

<div class="mySlides">
<div><img src="img/slide-01.jpg" width="640" height="484" alt=""></div>
<p>Caption (1)</p><-- caption optional //-->
</div>

<div class="mySlides">
<div><img src="img/slide-02.jpg" width="640" height="484" alt=""></div>
<p>Caption (2)</p><-- caption optional //-->
</div>

<div class="mySlides">
<div><img src="img/slide-03.jpg" width="640" height="484" alt=""></div>
<p>Caption (3)</p><-- caption optional //-->
</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>

Keep <div> and <span> line breaks exactly as is.

3-image example shown, using identically sized images 640 pixels wide to fit the column. The green dot container is optional, captions optional. Add more images as desired. Make sure to edit the green text to the correct sizes. They will be if they are copied and pasted from image uploads.

Use only as many dots (the third shown blue) as there are images.

See information

Page last modified: 25 August, 2024
Search | Legal | Qwwwik

Info

Qwwwik