An image slider shows several photos in one spot on your page, one after another, so visitors can browse without scrolling through a long list of images. Sliders work well for portfolios, product photos, and homepage hero sections. The problem is that most slider plugins are heavy, and they slow your site down for a feature you could build with a few lines of code.
You can add an image slider in WordPress without a plugin. First, you will add the popular Slick slider with the Code Snippets plugin, the safest way to add code without editing theme files. Second, you will add Slick slider in a child theme through functions.php. Third, you will build a light slider with pure CSS and JavaScript inside a Custom HTML block.
What Is an Image Slider in WordPress?
An image slider, also called a carousel, is a container that holds several images and shows one image, or a small group of images, at a time. Visitors move between images with arrows, dots, or a swipe on a phone screen. A slider is different from a gallery, because a gallery shows all images at once in a grid, while a slider shows them one at a time. Sliders suit places where space is limited, such as a hero section. For the gallery option, see our guide on how to add an image gallery in Elementor free.
A slider needs three parts to work. First, it needs HTML that holds the images in order. Second, it needs CSS that sizes the container, hides the images that are not active, and styles the arrows and dots. Third, it needs JavaScript that changes the active image when a visitor clicks an arrow or when the autoplay timer runs. The methods in this guide give you the same three parts with a small amount of code that you control.
How Do You Add a Slick Slider With Code Snippets?
Slick is a free and widely used JavaScript slider library. It is light, it works on phones, and it supports arrows, dots, autoplay, and swipe gestures out of the box. The Code Snippets plugin is the safest place to add that code, because it keeps your code separate from your theme. If you change your theme later, your slider code stays in place.
First, install and activate the free Code Snippets plugin from the WordPress plugin directory. Then create a snippet that runs on the front end only. Paste the code below into the snippet and activate it. This code loads the Slick stylesheet and script from a CDN.
function vtg_enqueue_slick_slider() {
wp_enqueue_style( 'slick-css', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css' );
wp_enqueue_style( 'slick-theme-css', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css' );
wp_enqueue_script( 'slick-js', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array( 'jquery' ), '1.8.1', true );
}
add_action( 'wp_enqueue_scripts', 'vtg_enqueue_slick_slider' );Next, add the slider HTML to any post or page with a Custom HTML block. The code below shows a slider with three images. Replace the example image URLs with the URLs of your own images from the Media Library. Every image sits inside its own div, and Slick turns each div into a slide. For more on that, read our WordPress image SEO tips.
<div class="vtg-slider">
<div><img src="https://example.com/image-1.jpg" alt="First slider image"></div>
<div><img src="https://example.com/image-2.jpg" alt="Second slider image"></div>
<div><img src="https://example.com/image-3.jpg" alt="Third slider image"></div>
</div>Finally, add a second Code Snippets snippet that starts the slider. It waits until the page loads, finds every element with the class vtg-slider, and turns it into a Slick slider with dots, arrows, and autoplay every four seconds.
function vtg_start_slick_slider() {
?>
<script>
jQuery(document).ready(function($) {
$('.vtg-slider').slick({
dots: true,
arrows: true,
autoplay: true,
autoplaySpeed: 4000,
slidesToShow: 1,
slidesToScroll: 1
});
});
</script>
<?php
}
add_action( 'wp_footer', 'vtg_start_slick_slider' );Save both snippets, clear any cache plugin you use, and open the page in a private browser window. If the slider does not start, check that both snippets are active and that the class name in the HTML matches the class name in the JavaScript. Open the browser console with F12 to check for errors. If you are new to adding code this way, our guide on how to add custom CSS in WordPress explains the same safe workflow for styles.
How Do You Add Slick Slider in a Child Theme?
The child theme method uses the same Slick code as the Code Snippets method, but the code lives in your child theme instead of in a plugin. A child theme inherits everything from your main theme and lets you add your own code without touching the parent theme files. This method is a good choice when you already use a child theme, or when you want the slider code to travel with the theme.
First, make sure you have an active child theme. If you do not have one, create it with a child theme generator plugin or by following the WordPress child theme documentation. Next, open the child theme functions.php file from Appearance, then Theme File Editor. Add the same enqueue code from the previous method to the end of functions.php, then add the slider start script to the same file. Finally, add the slider HTML to your post or page with a Custom HTML block, exactly as in the Code Snippets method.
The main risk with this method is losing your code. If you edit the parent theme functions.php by mistake, a theme update will wipe your changes, so always check that you are editing the child theme file before you save. The advantage is speed, because the code loads from your own server, and you can reuse the same slider on every page.
How Do You Build a Pure CSS and JavaScript Slider With Custom HTML?
If you want the lightest possible slider, you can build one with plain CSS and JavaScript inside a single Custom HTML block. This method loads no library at all, so it adds almost no weight to your page. It suits a simple slider with three to five images on a single page.
The code below creates a simple slider. The style section sizes the container, hides all slides except the active one, and styles the previous and next buttons. The script section tracks the current slide number, shows the right slide when a button is clicked, and moves to the next slide every five seconds. Paste the whole block into a Custom HTML block, then replace the example image URLs with your own image URLs. The example URLs use example.com as placeholders, so replace them with real Media Library URLs before you publish.
<style>
.vtg-simple-slider { position: relative; max-width: 900px; margin: 0 auto; overflow: hidden; }
.vtg-simple-slider .vtg-slide { display: none; }
.vtg-simple-slider .vtg-slide.vtg-active { display: block; }
.vtg-simple-slider img { width: 100%; height: auto; display: block; }
.vtg-simple-slider button { position: absolute; top: 50%; background: rgba(0,0,0,0.6); color: #fff; border: 0; padding: 10px 14px; cursor: pointer; }
.vtg-simple-slider .vtg-prev { left: 10px; }
.vtg-simple-slider .vtg-next { right: 10px; }
</style>
<div class="vtg-simple-slider">
<div class="vtg-slide vtg-active"><img src="https://example.com/image-1.jpg" alt="First slider image"></div>
<div class="vtg-slide"><img src="https://example.com/image-2.jpg" alt="Second slider image"></div>
<div class="vtg-slide"><img src="https://example.com/image-3.jpg" alt="Third slider image"></div>
<button class="vtg-prev" type="button">Prev</button>
<button class="vtg-next" type="button">Next</button>
</div>
<script>
(function() {
var slides = document.querySelectorAll('.vtg-simple-slider .vtg-slide');
var current = 0;
function showSlide(index) {
slides[current].classList.remove('vtg-active');
current = (index + slides.length) % slides.length;
slides[current].classList.add('vtg-active');
}
document.querySelector('.vtg-prev').addEventListener('click', function() { showSlide(current-1); });
document.querySelector('.vtg-next').addEventListener('click', function() { showSlide(current + 1); });
setInterval(function() { showSlide(current + 1); }, 5000);
})();
</script>If you need the same slider on many pages, use the Slick method instead, because it handles multiple sliders on one page without extra work. For a deeper look at image performance, read our guide on how to compress images in WordPress without a plugin, because large images are the most common reason a simple slider feels slow.
How Do You Prepare Images for a Slider?
Good sliders start with good images. Use the same width and height for every slide, because mixed sizes make the slider jump up and down as it changes images, which looks unprofessional. Crop or resize your images before you upload them instead of relying on the browser to shrink a huge file. Compress each image so it stays under 200 KB when possible, because large images delay the first slide and hurt your page speed.
Write short descriptive alt text for every slide image. Avoid file names such as IMG_4821.jpg, and rename the file before you upload it to something clear such as handmade-leather-bag-front.jpg. Keep the number of slides low. Five slides are enough for most pages. Ten or more slides slow the page and most visitors will never reach the last one, so pick your best images and put the strongest one first.
How Do You Make a Slider Mobile Friendly?
Most visitors will see your slider on a phone, so test it there first. Slick supports swipe gestures by default, which means visitors can drag the slider left and right with a finger. The pure CSS and JavaScript slider in this guide does not support swipe, so mobile visitors must use the buttons. Make the buttons large enough to tap, at least 44 pixels tall and wide, and keep them inside the image area so they are easy to reach with a thumb.
Check the slider at several screen widths, including a small phone, a tablet, and a desktop. Look for images that stretch, arrows that overlap the image edges, and dots that sit too close to the text below. If the slider feels slow on mobile, the cause is almost always image size, not the slider code. For hosting basics that keep image heavy pages fast, see our web hosting guide.
What Are the Common Problems With Image Sliders?
The most common problem is a slider that shows all images stacked on top of each other instead of one at a time. This usually means the JavaScript did not run. Check that the Slick files loaded, that jQuery is available, and that the class name in your HTML matches the class name in the script. The second common problem is images that look stretched or squashed, which happens when the slides have different aspect ratios. Fix it by cropping every image to the same ratio before you upload it.
A third problem is a slider that works in the editor preview but not on the live page. This is often a caching issue, so clear your cache and hard refresh the page with Ctrl plus F5. A fourth problem is autoplay that moves too fast. Visitors need at least four seconds to read a slide, so set autoplaySpeed to 4000 or higher. Finally, some sliders break after a theme update, because the new theme loads a different version of jQuery or changes the page structure. After every theme update, open your slider pages and confirm they still work.
Which Method Should You Choose?
Choose the Code Snippets method with Slick when you want a full featured slider, swipe support, and easy control, and you do not want to edit theme files. Choose the child theme method when you already use a child theme and you want the slider code to live with your theme. Choose the pure CSS and JavaScript method when you need a simple slider on one page and you want the lightest possible code with no external files. Whichever method you pick, use same sized compressed images, write real alt text, test on a phone, and keep the slide count low. The official Slick documentation at slick-slider.com lists every option you can change, and the official documentation at developer.wordpress.org explains how the enqueue functions used in this guide work.
Frequently Asked Questions
Can I add an image slider in WordPress without a plugin?
Yes. You can load the free Slick slider library with Code Snippets or a child theme, or you can build a light slider with pure CSS and JavaScript inside a Custom HTML block. None of these methods needs a slider plugin.
Is Slick slider free to use?
Yes, Slick is free and open source. You can load it from a CDN at no cost and use it on personal and commercial sites. The files are small, the library is stable, and it is widely used, so you can find help and examples easily when you need to change an option.
Why does my slider show all images stacked vertically?
That usually means the slider JavaScript did not run. Check that the Slick files loaded, that the class name in your HTML matches the class name in the script, and that no JavaScript error on the page stops the code. Clear your cache and test in a private browser window to rule out a caching problem.
Do image sliders hurt SEO or page speed?
A slider can hurt page speed when it loads many large images at once, because every image adds weight to the page. Keep the slide count low, compress every image, use the same size for all slides, and lazy load images below the fold when possible. A light slider with a few small images has almost no effect on speed or search rankings.
Last updated: November 2026.
