<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Photo SlideShow Widget</title>
        <style>
            .slideshow-container {
            max-width: 720px;
            position: relative;
            margin: auto;
            }
            .slide {
            display: none;
            width: 100%;
            opacity: 0;
            transition: opacity 1s ease;
            }
            .slide.active {
            display: block;
            opacity: 1;
            }
            .slide img {
            width: 100%;
            height: auto;
            }
            .arrow {
            cursor: pointer;
            position: absolute;
            top: 40%;
            transform: translateY(-50%);
            }
            .arrow.left {
            left: 20px;
            }
            .arrow.right {
            right: 20px;
            }
        </style>
    </head>
    <body radeditorbody="">
        <div class="slideshow-container">
        <div class="slide active">
        <a href="https://www.elocallink.tv/m/v/Redesign4/?pid=w5w8Q1p4Q61&amp;fp=oklawt21_wel_iwd">
        <img src="https://www.lawtonok.gov/home/showimage?id=2775&amp;t=638453995786993630" alt="Slide 1">
        </a>
        </div>
        <div class="slide">
        <a href="https://colgis.maps.arcgis.com/apps/dashboards/9fb579981b9641a1ae35b21ddfa5b1ec">
        <img src="https://www.lawtonok.gov/home/showimage?id=2777&amp;t=638453995795587588" alt="Slide 2">
        </a>
        </div>
        <div class="slide">
        <a href="https://www.lawtonok.gov/home/showdocument?id=1482&amp;t=638404743613830000">
        <img src="https://www.lawtonok.gov/home/showimage?id=2779&amp;t=638453995804337925" alt="Slide 3">
        </a>
        </div>
        <a class="arrow left" onclick="plusSlides(-1)">❮</a>
        <a class="arrow right" onclick="plusSlides(1)">❯</a>
        </div>
        <script>
    let slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        let slides = document.getElementsByClassName("slide");
        if (n > slides.length) {slideIndex = 1}
        if (n < 1) {slideIndex = slides.length}
        for (let i = 0; i < slides.length; i++) {
            slides[i].classList.remove('active');
        }
        slides[slideIndex - 1].classList.add('active');
    }

    // Automatic slideshow every 5 seconds
    setInterval(function() {
        plusSlides(1);
    }, 5000); // 5000 milliseconds = 5 seconds
</script>
    </body>
</html>