I don't always use sliders, but when I do - I use Flickity.

Should you use a slider? No.

Is it a terrible pattern - that almost always specifically distracts and detracts from your original goal? Yes.

Will you use one anyway? Yes.

When you do - there is one slider that is by far the best. It's called Flickity.

It's creator is known for making super high quality reusable 'things' that are rad. The docs are amazing - and it would serve no purpose for me to explain how it works - although - there are a few things you might want to know.

Is a slider a mysterious 'plugin' that you'll never be able to understand?

Mabye... but if you just decide to believe in yourself, you can just accept that it's a simple list of crap.

HTML

<ul class='crap-list'>
  <li class='crap'>
    💩 1
  </li>
  <li class='crap'>
    💩 2
  </li>
  <li class='crap'>
    💩 3
  </li>
</ul>

This is the proper markup for a list of things. Do you have a list of things?

Just because you're using WordPress or something like that - doesn't make it more 'mysterious'.

PHPish

<?php if (thereArePosts) { ?>
<ul class='slide-list'>
  <?php while (thereArePosts) { ?>
  <li class='slide'>
    <figure class='image'>
      <img src='<?php echo $imageSrc; ?>' alt='<?php echo $imageTitle; ?>' />
    </figure>
  </li>
  <?php } ?>
</ul>
<?php } ?>

(WP loop is a super ugly gnarly thing I wont pretend to understand - but you get the point from this pseudo code - it's still just a loop spitting out a list of crap)

If you are lucky enough to be using a fun templating language - it might look like this:

An elegant templating language

<ul class='slide-list'>
  {{#each model as |slide|}}
  <li class='slide'>
    <figure class='image'>
      <img src='{{slide.image}}' alt='{{slide.title}}' />
    </figure>
  </li>
  {{/each}}
</ul>

So, whatever - right? You have some stuff you want to 'slide' back and fourth... Just add flickity. (and learn CSS really well too - if you have time)

One thing that isn't provided as a flickity option - is a 'fade' through type sliding. Here is an example of how to pull that off:

Sometimes you don't want an image to be the things that's sliding - but other stuff... maybe you need a background-image and not an img. Here is an example of that:

And sometimes you want to style it out a bit fancier and slide many things together in a fun animated way. Here's a take on that:

In conclusion:

Do not use sliders. But if you have to... don't use some 10 year old bloated 'plugin' that was on a 'top 27 sliders of 2014' list. You'll get stuck inputing data in a way that only works for that 'slider.' Instead - start with a list of crap - or a system to generate a list of crap - and only THEN choose a slider that will slide that crap. I'll help you choose... there is only 1 slider. It is Flickity.

@sheriffderek

......

I'm working full-time now - with Perpetual Education on their new learning platform. Check it out! It's by far the best way to learn design and development for the least money and the fastest results - and it's really fun. Seriously.

→ https://perpetual.education

Free advice sessions: no strings attached - just a real human who wants to help you become a great designer.