AI used to make a slider (picture rotator)

[markjones]

Reporting on 2 things here. First is that, after some playing, I'm having luck with letting AI help me code things in WonderCMS. Second is that I've created a slider that can be pasted into WonderCMS.

Starting with the second, here is the code:
<div>
<!-- Slider Styles -->
<style>
.wcms-slider{position:relative;max-width:800px;margin:0 auto;overflow:hidden;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,0.1)}
.wcms-slider-wrapper{display:flex;transition:transform 0.5s ease-in-out}
.wcms-slide{min-width:100%;position:relative}
.wcms-slide img{width:100%;height:400px;object-fit:cover;display:block}
.wcms-slide-content{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.7));color:white;padding:20px;text-align:center}
.wcms-slide-title{font-size:1.5rem;font-weight:bold;margin-bottom:0.5rem}
.wcms-slide-description{font-size:1rem;opacity:0.9}
.wcms-nav-buttons{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.5);color:white;border:none;padding:10px 15px;cursor:pointer;font-size:18px;border-radius:4px}
.wcms-nav-buttons:hover{background:rgba(0,0,0,0.8)}
.wcms-prev{left:10px}.wcms-next{right:10px}
.wcms-dots-container{text-align:center;padding:20px 0}
.wcms-dot{height:12px;width:12px;margin:0 5px;background-color:#bbb;border-radius:50%;display:inline-block;cursor:pointer}
.wcms-dot.active{background-color:#333}.wcms-dot:hover{background-color:#666}
@media (max-width:768px){.wcms-slide img{height:250px}.wcms-slide-title{font-size:1.2rem}.wcms-slide-description{font-size:0.9rem}.wcms-nav-buttons{padding:8px 12px;font-size:16px}}
</style>

<!-- Slider HTML -->
<div class="wcms-slider">
<div class="wcms-slider-wrapper" id="wcmsSliderWrapper">
<div class="wcms-slide">
<img src="https://webpin.ch/wonder/files/sydney0.jpg" alt="Sydney Harbor">
<div class="wcms-slide-content">
<div class="wcms-slide-title">Sydney Harbor</div>
<div class="wcms-slide-description">Iconic view of Sydney's harbor and Opera House</div>
</div>
</div>
<div class="wcms-slide">
<img src="https://public.youware.com/users-websit ... ee0375.jpg" alt="Modern City">
<div class="wcms-slide-content">
<div class="wcms-slide-title">Modern City</div>
<div class="wcms-slide-description">Contemporary urban architecture at twilight</div>
</div>
</div>
<div class="wcms-slide">
<img src="https://public.youware.com/users-websit ... 7f57e7.jpg" alt="Urban Landscape">
<div class="wcms-slide-content">
<div class="wcms-slide-title">Urban Landscape</div>
<div class="wcms-slide-description">Stunning city buildings reaching for the sky</div>
</div>
</div>
</div>

<button class="wcms-nav-buttons wcms-prev" onclick="wcmsChangeSlide(-1)">&#10094;</button>
<button class="wcms-nav-buttons wcms-next" onclick="wcmsChangeSlide(1)">&#10095;</button>
</div>

<div class="wcms-dots-container">
<span class="wcms-dot active" onclick="wcmsCurrentSlide(1)"></span>
<span class="wcms-dot" onclick="wcmsCurrentSlide(2)"></span>
<span class="wcms-dot" onclick="wcmsCurrentSlide(3)"></span>
</div>

<!-- Slider JavaScript (uses prefixed functions to avoid conflicts) -->
<script>
// Initialize variables
var wcmsCurrentIndex = 0;
var wcmsAutoInterval;
var wcmsSlides = document.querySelectorAll('.wcms-slide');
var wcmsDots = document.querySelectorAll('.wcms-dot');
var wcmsWrapper = document.getElementById('wcmsSliderWrapper');

// Function to show a specific slide
function wcmsShowSlide(n) {
wcmsCurrentIndex = n;

// Handle boundaries
if (wcmsCurrentIndex >= wcmsSlides.length) {
wcmsCurrentIndex = 0;
}
if (wcmsCurrentIndex < 0) {
wcmsCurrentIndex = wcmsSlides.length - 1;
}

// Move slider
wcmsWrapper.style.transform = 'translateX(-' + (wcmsCurrentIndex * 100) + '%)';

// Update dots
for (var i = 0; i < wcmsDots.length; i++) {
wcmsDots.className = wcmsDots.className.replace(" active", "");
}
wcmsDots[wcmsCurrentIndex].className += " active";
}

// Change slide by delta
function wcmsChangeSlide(dir) {
wcmsShowSlide(wcmsCurrentIndex + dir);
wcmsResetAuto();
}

// Go to specific slide
function wcmsCurrentSlide(n) {
wcmsShowSlide(n - 1);
wcmsResetAuto();
}

// Auto advance
function wcmsAutoSlide() {
wcmsCurrentIndex++;
wcmsShowSlide(wcmsCurrentIndex);
}

// Start auto slideshow
function wcmsStartAuto() {
wcmsAutoInterval = setInterval(wcmsAutoSlide, 5000);
}

// Reset auto timer
function wcmsResetAuto() {
clearInterval(wcmsAutoInterval);
wcmsStartAuto();
}

// Initialize slider
wcmsShowSlide(0);
wcmsStartAuto();

// Pause on hover
var wcmsSlider = document.querySelector('.wcms-slider');
wcmsSlider.addEventListener('mouseenter', function() {
clearInterval(wcmsAutoInterval);
});

wcmsSlider.addEventListener('mouseleave', function() {
wcmsStartAuto();
});
</script>
</div>

I got the code by using YouWare AI. I've also had some luck with DeepSeek. ChatGPT, Claude, Copilot and others I tried all failed to give working code on simpler problems. I've made the project public under the name "Slider for WonderCMS" on Youware.com. It took multiple prompts.

To use this slider in WonderCMS:
Copy the entire <div class="slider-container">...</div> section along with the JavaScript
Paste it into your WonderCMS page content area
The CSS can be added to your theme's CSS file or wrapped in <style> tags
Replace image URLs with your own hosted images
Customize slide titles and descriptions as needed

Features:
Auto-rotation every 5 seconds
Navigation arrows and dot indicators
Touch/swipe support for mobile devices
Keyboard navigation (arrow keys)
Responsive design
Pause on hover

If you can't access the AI and are interested in the prompt strategy, message me and I'll go into more detail. I am an AI skeptic for writing prose but for this, it certainly shortened my time and generated pretty well documented and readable code. A bit amazing.

[wiz]

Hi Mark, first of all cheers for giving WonderCMS a go.

Is there any chance you could upload your code to GitHub? That was it makes easier to test it and possibly package it up as an officially supported WonderCMS plugins or some sort of re-usable slider that is also configurable with pictures.

If you're trying to develop things for WonderCMS, I would suggest giving Cursor a go. It has editing capabilities locally, gets full knowledge of WonderCMS and you can avoid copy/pasting code over and over again.

[markjones]

I am new to GitHub but have been exploring prior to your response in my attempt to get themes working. I posted here part from excitement, part from trying to let others know the AI route may actually be useful. One "trick" is to tell the AI you don't want external style sheets. For me, that makes testing so much easier. I seem to always get hung up in some cache hell when trying to tweak style sheets. If there is a way to more easily test code for WonderCMS, I haven't found it.

In the current form, as the AI presented it, it is pretty well documented but not as well as I would like. I'm working to get it both more user friendly and more robust.

As I am new to GitHub, can you flesh out your suggestion? Is it OK to put a work in progress up or better to wait until most of the rough edges are gone? I also have to admit that plugins somewhat elude me. I also am continually vexed by getting the addressing correct on the themes I've put on GitHub. There must just be a few things I'm missing that make GitHub a slog everytime I try to do something. I've been doing html, asp and php for decades but much of the WonderCMS documentation is still opaque.