At one point, these terms meant different things. Sliders slid images on and off screen in one direction, while carousels moved images with a 3D circle effect. Today, we use these terms interchangeably; probably because we depend on them so much. Sliders and carousels are overused and abused.

Clients and developers want them because they think, "It allows me to show my users multiple things in one space." But that's not what happens. Unless what you want the user to see is on the first slide, the chance they will actually see it is incredibly slim. Even if you are putting the most important content on the first slide, and you use an automatic transition to the next, you are adding an expiration date to the content where the user will no longer see it. But if you don't use an automatic transition, you are just burying the rest of the slides. And hopefully, you are not waiting for the user to click on a slide because the chances of that happening are even smaller. I think you get the point.

But, as you can see, I have included a section on sliders and carousels. We won't be creating our own pattern here though. Like I've mentioned, sliders and carousels are very common. And since they are a little bit more complex than an image grid, they require some JavaScript. Instead of reinventing the wheel, I highly recommend using a JavaScript plugin to set up your sliders. Here are my three favorites that I see being used in professional websites frequently:

Out-of-the-box, these carousels are super simple. You can easily style them and tweak the settings. Owl Carousel provides more options than bxSlider, but sometimes that can get in your way. FlexSlider has some unique features worth looking into. All three options are great, but also you should review what they are capable of before selecting one to implement.