Just want the code? Here’s the git repository

If you want to maintain total control over the code and design choices on your site, it’s important to use as few plugins as possible! Creating your own components not only gives you total control, but it allows you to keep your http requests low, and reduces the amount of data required to load your site.

A popular component on many websites is the Hero Slider. These are great for supporting your branding and quickly conveying bits of information, like upcoming events, sales, mailing list forms, and so on. They also tend to be extremely bulky plugins, as they load boatloads of css and javascript in order to support their many customizations.

There are many ways to create your own, and a number of great libraries like swiper and tinyslider, but the most efficient way is to build your own! Personally, I like to have a library of my own components, that way I can easily re-use and modify them for quickly setting up new sites and being able to easily tailor and extend them to add the required form and functionality.

So enough rambling, let’s start working on our no plugin image slider! I’m going to demonstrate the barebones HTML, CSS, and Javascript required, as well as how to implement this in WordPress.

Step 1: The Structure

First, lets set up the basic HTML we’ll need to accomplish this. We’ll need two divs, one to act as the wrapper, and one to contain each of our slides. The first div will hide the overflow with a set width and overflow hidden, while the second will have width:auto; and overflow the screen to contain each of our slides. We can add a couple of demo slides inside as well.

<div class="slider-wrapper">
      <div id="slider" class="slider transition">
        <div class="slide">1 <img src="img.jpg" /></div>
        <div class="slide">2 <img src="img2.jpg" /></div>
        <div class="slide">3 <img src="img3.jpg" /></div>
      </div>
</div>

Now for the styling. The width of the slider-wrapper is up to you, but you should set your .slide class to the same width in order to have each one fill the width of the container div. I’ve added borders to the .slider and .slide classes just so that you can verify the width of the elements while building out the slider. I’ve also set the initial transform of the .slider to transform:translateX(-90vw), we’ll discuss that in a second.

 .slider-wrapper {
        width: 90vw;
        margin: auto;
        overflow: hidden;
      }
      .slider {
        width: auto;
        height: 80vh;
        margin: auto;
        display: flex;

        border: 2px solid black;
        transform: translateX(-90vw);
      }
      .slide {
        width: 90vw;
        background: grey;
        height: 30vh;
        border: 1px solid red;
        flex: 1 0 auto;
      }

  .transition {
        -webkit-transition: 0.3s all;
        -moz-transition: 0.3s all;
        -o-transition: 0.3s all;
        transition: 0.3s all;
      }
      .notransition {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
      }

Great! Now we need some buttons.

 <div class="slider-controls">
      <p id="slider-left" onclick="left()">left</p>
      <p id="slider-right" onclick="right()">right</p>
    </div>

You can swap out ‘left’ and ‘right’ for icons, carats, or whatever makes you feel good.

Step 2: The JavaScript

Okay so we have our structure set up, now we need to make it move! We’ll need to access some of the HTML elements we just set up, so lets grab them first

var slideRight = document.getElementById("slider-right");
var slideLeft = document.getElementById("slider-left");
var theSlider = document.getElementById("slider");
var slides = document.getElementsByClassName("slide");

and we’ll need some additional variables to help us keep track of a few things

//get number of slides
 var count = slides.length;
//set your start position to 2
 var position = 2;

The count will allow us to track our position among the number of slides we’ve created, and we’re setting our start position to 2 so that we start from the second slide. Why?

Well, in order to get a smooth, infinite scroll from the last slide to the first slide and vice versa, we’re going to need to duplicate our first and last slides and append them to opposite sides of our slider.

With duplicates, we can animate our transition back to the first and last slides, remove our transition effect, jump back to the actual start/end of the slider, and then re-enable our transition so that we can continue on with our smooth slide movement.

So, lets append a duplicate of our first slide to the end, and a duplicate of our last slide to the front.

//get the last slide first so that you aren't copying the first slide twice
 var newChild = slides[slides.length - 1];
//append copy of last slide to front, and copy of first slide to end
 theSlider.innerHTML =
     newChild.outerHTML + theSlider.innerHTML + slides[0].outerHTML;

Now we need to get things moving! We’ll need to write two functions to handle movement of the slides to the left and right. Lets write our right movement function first.

   function right() {
        console.log("position: " + position + " count: " + count);

        if (position <= count) {
          console.log("right, position<=count");

          theSlider.style.transform = `translateX(-${9 * position}0vw)`;
          position++;
        } else if (position > count) {
          console.log("right, position >count");

          theSlider.style.transform = `translateX(-${9 * position}0vw)`;
          setTimeout(function () {
            theSlider.classList.remove("transition");
            theSlider.classList.add("notransition");

            theSlider.style.transform = "translateX(-90vw)";
          }, 300);

          setTimeout(function () {
            theSlider.classList.add("transition");
            theSlider.classList.remove("notransition");
          }, 600);
          position = 2;
        }
        console.log("position: " + position + " count: " + count);
        return position;
      }

I added some console.logs for debugging, so that you can check that your code is running when expected. You can remove those if everything’s working!

We have an if/else statement to handle two scenarios, when position <= count and what to do otherwise. this will allow us to handle normal movement, as well as transitioning from the end of the slider, back to the front of the slider, seamlessly.

Regular movement is straightforward, but the seamless transition is where it gets fun! We’re using two setTimeouts, one at 300ms and one a 600ms, (this mirrors the transition speed, so adjust if you set a longer or shorter transition) in order to allow our slider to transition to the duplicate at the end, remove its transition style, jump back to the front of the slider, and then re-enable transitions. Viola!

We’ll do the same thing for our left movement, but for the opposite direction

 function left() {
        if (position > 2) {
          console.log("left, position >=2");
          position--;
          if (position == 1) {
            theSlider.style.transform = `translateX(0vw)`;
            position = slides.length - 2;
            setTimeout(function () {
              theSlider.classList.remove("transition");
              theSlider.classList.add("notransition");
              theSlider.style.transform = `translateX(-${9 * position}0vw)`;
            }, 300);

            setTimeout(function () {
              theSlider.classList.add("transition");
              theSlider.classList.remove("notransition");
            }, 600);
          } else {
            theSlider.style.transform = `translateX(-${9 * position}0vw)`;
          }
        } else if (position < 2) {
          console.log("left, position <=2");
          position = slides.length - 2;
          theSlider.style.transform = `translateX(0vw)`;
          setTimeout(function () {
            theSlider.classList.remove("transition");
            theSlider.classList.add("notransition");

            console.log(position);
            theSlider.style.transform = `translateX(-${9 * position}0vw)`;
          }, 300);

          setTimeout(function () {
            theSlider.classList.add("transition");
            theSlider.classList.remove("notransition");
          }, 600);
        } else if (position == 2) {
          position--;
          theSlider.style.transform = `translateX(-${9 * position}0vw)`;
        }
        console.log("position: " + position + " count: " + count);
        lastClicked = left;
        return position, lastClicked;
      }

Now just set an Interval on the right function if you want automatic transitioning, and you’re good to go!

Step 3: WordPress

With Advanced Custom Fields Pro, you can make a really nice, dynamic slider! I’ve included an export of my field group in the repo if you’d like to implement it. I have things grouped for future extensibility, so I can add new groups with different fields/styles down the road.

Your CSS and Javascript will be largely the same, but with a repeater you can dynamically add and remove slides, which will result in an easy to use back-end interface which can be used on any page. The best way to make this easily re-usable would be to create a template part, and then simply use get_template_part() to implement it on the page templates you want it to appear on.

Tailwindcss is an amazing low-level css framework that allows you to build custom designs while serving incredibly small stylesheet files. Taken straight from their website,

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Instead of complex components, tailwind is a framework of base CSS styles baked into their own classes, which removes the complexity and bulk associated with other css frameworks that aim to build their own complicated components. With the power of PurgeCSS, any unused classes are removed from your final production stylesheet, which leaves you with a stylesheet taking up mere kilobytes.

In this post, I want to discuss how I set it up using another fantastic tool, wpgulp, in order to extend my local WordPress development environment and begin building ultra-lean WordPress sites with Tailwindcss!

Step 1: Install WP gulp

This is fairly straightforward. Navigate to your theme folder, and run npx wpgulp . There is some minimal configuration associated with wpgulp inside the wpgulp.config.js file. You’ll have to change your projectURL to match your local URL, and ensure the paths to all your assets are mapped correctly. It’s very simple, and thewpgulp repository readme provides you with everything you need to know to get up and running in minutes.

Step 2: Install additional dependencies

You’ll need a few more packages to get up and running. Install the following:

npm install —save-dev gulp-postcss tailwindcss

Inside your main sass file, you’ll need to import tailwind via:

@tailwind base;
@tailwind components;
@tailwind utilities;

And finally npx tailwind init to set up your tailwind.config.js file. This will present you with a boilerplate config file to customize your tailwind theme. Here, you will want to add a couple lines to the purge section,

module.exports = {
    purge: {
        // enabled: true,
        content: [“./*.php”, “./**/*.php”],
    },
    theme: {
    extend: {},
    },
    variants: {},
    plugins: [],
};

You will notice that the line // enabled:true is commented out. This line will purge all unused classes from your final stylesheet, which is only necessary when you’re done modifying your styles and ready to push to production. Leaving this uncommented will slow down compile times and require you to recompile if you end up needing to add a class that has been purged, so leave it commented out until you’re done making changes!

The content line is telling the script which files to look at, so add any paths/file extensions in which you’re using tailwind.

Step 3: Modify your gulp file

Wpgulp configures your gulpfile for you, but you’ll need to add a few lines so that it can utilize postcss and tailwind correctly.

Upon inspection, you will find a list of imported plugins for css, utility, and more. Start by importing tailwind and the gulp-postcss packages we installed earlier:

const postcss = require( ‘gulp-postcss’ );
const tailwindcss = require( ‘tailwindcss’ );

Finally, we’ll need to add them to the gulp tasks that generate our stylesheets. You will find two distinct functions, a styles task and a stylesRTL task. Inside each of them respectively, add:

gulp.task(“styles”, () => {
return gulp
…
.pipe(postcss([tailwindcss(“tailwind.config.js”),require(“autoprefixer”)]))
…

And

gulp.task(“stylesRTL”, () => {
return gulp
…
.pipe(postcss([tailwindcss(“tailwind.config.js”), require(“autoprefixer”)]))
…

Step 4: Get Building!

With that, you should be ready to start building with tailwindcss! run npm start and you’re off to the races. You can check out some of their pre-built components to get started, and run through their documentation to get up to speed on their class naming conventions. Once you get the hang of it, you’ll never want to let it go!