How to create an image slider in WordPress without plugin

Image sliders are a very usual request for websites. There are so many approaches to create an image slider in WordPress and there are too many sliders to use like OWL carousel and Slick slider. Also in WordPress, there is plenty of plugins to use.

Another option could be to use ACF repeater and a preferred slider as we mentioned before. But this is a time-consuming task, as for every image you need to click to add a new row, add a new image, and so on.

One solution, probably not the best but it is simple, is to use a combination of WordPress built-in gallery and OWL carousel. With a gallery, you can select multiple images at once inside the post. This is what I’ll describe in this post.

So for this task, we need:

jQuery
OWL Carousel
A gallery
A little bit of CSS
A little bit of JavaScript

How to create an image slider in WordPress

We create a page and we create a new gallery

We create the gallery and insert images

Gallery settings

On sidebar settings, we choose “Link to none”. In addition, on the Advanced tab we put the two classes we’ll need, owl-carousel and owl-theme. It doesn’t matter the number of columns.

The page code

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
    <style>
      .wp-block-gallery {
        padding: 0;
        list-style-type: none;
        border: 2px solid lightgrey;
      }
    </style>
  </head>
  
  <body>
    <?php
    if (have_posts()) : 
      while (have_posts()) : the_post();
      
        the_content();
    
      endwhile;
    endif;
    ?>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script>
      $('.owl-carousel').owlCarousel();
    </script>
  </body>
</html>