Preview in new tab

Sliders are a great way to add visual appeal to your WordPress site. Whether you’re showcasing images, highlighting products, or adding testimonials — a slider makes it more interactive.

Most people use plugins for sliders, but did you know you can build one using just AI and a bit of code? That’s right — with tools like ChatGPT, you can generate a fully functional, responsive slider in minutes — without installing any plugin.

In this guide, I’ll show you how to create a slider like this.

❮ ❯

Ai-Generated Slider

📋 Step 1: Decide What Kind of Slider You Want (Optional but Helpful)

Before asking AI to generate the code, it helps to have a rough idea of what kind of slider you’re looking for. You don’t need to answer a long list of questions — just think about a few things like:

How many slides do you want? (e.g., 3, 5, etc.)
Will each slide have just an image, or maybe a heading and a button too?
Do you want navigation arrows, auto-slide, or both?
Any specific colors or layout style in mind?
Should it work well on mobile devices?

That’s it! Even having a vague idea will help you write a better prompt for the AI — and get the exact kind of slider you want.

Of course, if you’re not sure, you can always start simple and improve it later by asking AI to tweak the code.

📋 Step 2: Upload Your Slider Images and Get the Image Links

Before you generate the code for your slider, it’s a good idea to upload your images to WordPress and collect their URLs — because these links will be used in the code you get from AI.

Here’s how to do it:

1. Go to your WordPress Dashboard → Media → Add New.

2. Now drag and drop the files to upload. Or simply select the files from your computer and upload the files.

3. Click on ‘Copy URL to Clipboard’ button for every image.

Keep the links ready (you’ll paste them into the code later).

📋 Step 3: Ask AI to Generate the Slider Code (For the Custom HTML Block)

Now that you’ve decided what kind of slider you want and collected your image URLs, it’s time to ask AI (like ChatGPT) to generate the slider code.

The best part?

You don’t need to touch any theme files or templates.

You’ll be using the ‘Custom HTML’ block inside the WordPress Block Editor — so make sure the code you request from ChatGPT is self-contained (HTML, CSS, and JavaScript all in one block).

Here’s an example prompt you can copy and paste into ChatGPT:

💡 Pro Tip:

Be sure to mention “for the Custom HTML block” in your prompt so ChatGPT doesn’t create code that relies on editing theme files or adding external stylesheets.

Now to go to ChatGPT or any other AI tools, give the prompt.

Then copy the HTML code.

Note: The very first generated code may not work. If you find any issue, just let ChatGPT know about it and keep requesting for the code until you get the workable code.

📋 Step 4: Add the Code to Your WordPress Site

Now that you have your slider code ready, it’s time to add it to your WordPress page or post.

Follow these steps:

1. Log in to your WordPress dashboard.
2. Navigate to the post or page where you want to display the slider.
3. Click the ‘+’ icon to add a new block.
4. Search for and select the ‘Custom HTML’ block.

5. Paste the code you received from ChatGPT into the block.

6. Click ‘Preview’ to see the slider in action.

7. Finally, hit ‘Update’ or ‘Publish’ to make it live.

That’s it — your slider is now part of your content!

💡 Note: If your theme or page builder restricts custom scripts (like JavaScript), you might need to enable script support or use a code snippet plugin — but in most cases, the Custom HTML block works just fine.

📋 Step 5: Customize Your Slider Design (Optional)

If you want to customize the slider, just tell ChatGPT:

• “Add buttons to the images”
• “Remove the auto-slide feature”
• “Add dot navigation under the slides”

AI makes the tweaking process incredibly easy. Be sure to give this instruction on the same chat.

⚠️ Limitations of This Method

While this is a fun and lightweight way to build a slider, it’s not for everyone. Some limitations:

• You’ll need to manually tweak code if you want changes
• No drag-and-drop interface
• Not ideal for clients or non-tech users
• No media library integration

🚀 Looking for a Simpler Way? Meet Sliderberg (Coming Soon)

We’re building Sliderberg — a new block-based WordPress slider plugin built specifically for the Gutenberg editor. It will let you:

✅ Add image or content sliders with ease
✅ Customize layouts visually (no code)
✅ Enjoy fast performance and clean design
✅ Slide anything — not just images

→ Launching soon!

🧠 Final Thoughts

With a bit of AI help, you can create a stunning WordPress slider in just a few minutes — no plugin required. This approach is great for learning, experimenting, or building lightweight pages.

But if you’re looking for something more powerful and user-friendly, keep an eye on Sliderberg. We’re excited to show you what’s coming next!