Hide Flickity Slider Dots With Only One Slide in WordPress

A Flickity slider in WordPress shows its page dots even when there is only one slide. A single dot does nothing when clicked and looks like a broken control, which happens often with sliders filled from a gallery field or a query that sometimes returns one item.

This one CSS rule hides the Flickity slider dots when there is only one slide, and shows them again as soon as there are two or more.

The snippet

/* Flickity v2 (<li class="dot">) and v3 (<button class="flickity-page-dot">). */
.flickity-page-dots > :only-child {
	display: none;
}

How it works

Flickity puts one dot per slide inside .flickity-page-dots. :only-child matches an element that has no siblings, so it only hides the dot when it is the single one.
> with no element name matches any direct child. That covers both Flickity versions: v2 prints <li class="dot"> inside an <ol>, v3 prints <button class="flickity-page-dot"> inside a <div>. The older version of this post used li:only-child, which does nothing with Flickity v3.
The empty dots container stays in the page but takes no space, because Flickity positions it absolutely below the slider.

Add it with Scripts Organizer

In Scripts Organizer go to Code Blocks → Add New and give the block a name. Set Trigger location to Conditions and set Template to All (or only the pages with a slider). Under Script location tick Header, set Header Mode to CSS, paste the code and publish.

Scripts Organizer prints header code with the Conditions trigger on the front end, not with Everywhere, and adds the <style> tag itself. You can also add the rule to your theme’s stylesheet or to Appearance → Editor → Styles → Additional CSS.

Customise it

Hide the previous and next arrows for a single slide too:

/* Also hide the arrows when there is only one slide (needs :has(), supported by current browsers). */
.flickity-enabled:has(.flickity-page-dots > :only-child) .flickity-prev-next-button {
	display: none;
}

If you create the slider yourself in JavaScript, you can also turn the dots off at the source: pageDots: slides.length > 1 in the Flickity options.

Gotchas

With groupCells each dot stands for a group of cells, so the dots are also hidden when all cells fit in one group. That is usually what you want, because there is nothing to page through.
Some builders and slider plugins rename the Flickity classes or draw their own dots. Inspect the dots in the browser and use the container class you see there.

In the Scripts Organizer library Import it with one click from Scripts Organizer.