The Dream Stream

You will want to add this as an HTML block on a given page.

Find the 

(<a href="/library-events-calendar"> Library Events Page) to change the link for the given slide. Make sure to keep the text after to keep ADA compliant.

you can also change the time of the slide rotation at the very bottom, change the 7000 to 5000 if you want the transition to change from 7 seconds to 5
 

<div class="homepage-carousel-inner" style="position: relative; width: 100%; max-width: 1000px; margin: auto; height: 600px; background-color: #ffffff;">
    <!-- Previous Button -->
    <a class="previous homepage-carousel-control" role="button" tabindex="0" aria-controls="carousel-items" aria-label="Previous Slide" onclick="prevSlide()">
        <svg role="img" width="30" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg" class="shadow">
            <polygon points="30 0 30 30 0 15" stroke="#614378" fill="#614378" stroke-width="2"></polygon>
        </svg>
    </a>

    <!-- Next Button -->
    <a class="next homepage-carousel-control" role="button" tabindex="0" aria-controls="carousel-items" aria-label="Next Slide" onclick="nextSlide()">
        <svg role="img" width="30" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg" class="shadow">
            <polygon points="0 0 30 15 0 30" stroke="#614378" fill="#614378" stroke-width="2"></polygon>
        </svg>
    </a>

    <!-- Carousel Items -->
    <div id="carousel-items" class="homepage-carousel-items" aria-live="off" style="width: 100%; display: flex; overflow: hidden; height: 100%;">
        <!-- Slide 1 -->
        <div class="carousel-instance">
            <div class="homepage-carousel-item active" role="group" aria-roledescription="slide" aria-label="1 of 4">
                <a href="/library-events-calendar"> Library Events Page
<!--CHANGE LINK AND TEXT HERE-->
                    <div class="homepage-carousel-image" style="background-image: url('https://streamline.imgix.net/1afd1b18-1586-4ab7-9b28-3292791eeaed/bcfbca89-a5d5-4e90-bc0a-fc66e7f160c5/Chess%20Club%20(1900%20x%20900%20px).png?ixlib=rb-1.1.0&w=2000&h=2000&fit=max&or=0&s=482188c8b82fa7b0d75addbe8dbb5a79'); background-size: contain; background-position: center; background-repeat: no-repeat; height: 100%; background-color: #ffffff;"></div>
                </a>
            </div>
        </div>

        <!-- Slide 2 -->
        <div class="carousel-instance">
            <div class="homepage-carousel-item" role="group" aria-roledescription="slide" aria-label="2 of 4">
                <a href="/library-events-calendar"> Library Events 2
<!--CHANGE LINK AND TEXT HERE-->
                    <div class="homepage-carousel-image" style="background-image: url('https://streamline.imgix.net/1afd1b18-1586-4ab7-9b28-3292791eeaed/f78c0832-35b7-440b-8311-415650a4f9b0/D&D%20Youth%20eng%20and%20span.png?ixlib=rb-1.1.0&w=2000&h=2000&fit=max&or=0&s=d6512755027082ff649eaf91082119ab'); background-size: contain; background-position: center; background-repeat: no-repeat; height: 100%; background-color: #ffffff;"></div>
                </a>
            </div>
        </div>

        <!-- Slide 3 -->
        <div class="carousel-instance">
            <div class="homepage-carousel-item" role="group" aria-roledescription="slide" aria-label="3 of 4">
                <a href="/library-events-calendar"> Library Events 3
<!--CHANGE LINK AND TEXT HERE-->
                    <div class="homepage-carousel-image" style="background-image: url('https://streamline.imgix.net/1afd1b18-1586-4ab7-9b28-3292791eeaed/b63ad455-4ca5-4e93-8bba-04174210b6b0/page_turners_and_treats.png?ixlib=rb-1.1.0&w=2000&h=2000&fit=max&or=0&s=590677d2efaeda7a8941cdc5c204d8b6'); background-size: contain; background-position: center; background-repeat: no-repeat; height: 100%; background-color: #ffffff;"></div>
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Carousel Script -->
<script>
    let currentSlide = 0;
    const slides = document.querySelectorAll('.homepage-carousel-item');
    const totalSlides = slides.length;

    function showSlide(index) {
        slides.forEach((slide, i) => {
            slide.classList.remove('active');
            if (i === index) {
                slide.classList.add('active');
            }
        });
    }

    function nextSlide() {
        currentSlide = (currentSlide + 1) % totalSlides;
        showSlide(currentSlide);
    }

    function prevSlide() {
        currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
        showSlide(currentSlide);
    }

    setInterval(nextSlide, 7000); // Automatically rotate every 7 seconds
</script>