Image Slider Types

This repo contains three versions of an image slider (arrows + dot navigation), each built using a different approach: jQuery plugin, vanilla JavaScript, and cutting-edge native CSS.

The goal is to compare how the same UI pattern can be built in different ways, and to practice making smart choices based on browser support, complexity, and maintainability.

Pick a Slider Version:

What this exercise does

  • Shows the same slider UI built 3 different ways
  • Uses arrows + dots in each version
  • Keeps the image set consistent so comparison is fair
  • Highlights tradeoffs: support, complexity, control

Why we’re doing it

  • Sliders are a very common client request
  • There is no single “best” method in every situation
  • Learning multiple approaches makes you more flexible
  • Practice reading existing and writing new code

How to use this repo

  • Start with the jQuery version (oldest approach)
  • Then study the vanilla JS version (modern + custom)
  • Finish with native CSS (new features + progressive enhancement)

What’s the same in all 3 sliders?

  • Same purpose: show multiple images in a limited space.
  • Same UI features: arrows to advance + dots to jump to a slide.
  • Same design problem: images might not all match size perfectly, so we use height + object-fit to keep the slider stable.
Real-world note: On an actual website, the best practice is usually to crop/resize images so they all share the same aspect ratio. For these examples, we use CSS tools to keep the slider stable anyway.

What’s different in each version?

Method How it works Pros Cons Best for
jQuery (Slick) You load jQuery + the Slick plugin. Slick generates the slider behavior for you and you can configure it further with built-in options. Fast to set up, lots of built-in features, very common in older sites. Extra dependency + extra files, not the modern default approach. Legacy sites, quick prototypes, when a plugin’s feature set fits your needs.
Vanilla JS Your code tracks the slide index and updates the slider using transform: translateX(...). Buttons + dots trigger functions. No external libraries, full control, good learning tool. Code is more complex than other methods. Modern sites where you want control without pulling in an external framework.
Native CSS (Cutting Edge) Uses scroll snapping for the “slide” feel, then experimental CSS like ::scroll-button() + ::scroll-marker for native arrows + dots. Very lightweight, minimal code, good example of progressive enhancement and how CSS is evolving. Uses brand new CSS features that currently have limited browser support, fewer advanced behaviors than the JS version. Modern-browser audiences, demos/portfolio work, “advanced extra” patterns.

Decision guide (what should you choose?)

  • If you need maximum compatibility: use the JS version (or a well-supported library/plugin).
  • If you want the simplest “custom” solution: use the vanilla JS version.
  • If you want to experiment / learn modern CSS: use the native CSS version (with a clear browser warning).
Important: The “native CSS” version is here because CSS is quickly evolving. It takes time for browsers to implement new features so you should treat it like a cutting-edge tool that's not universally safe yet.

Folder map (what’s where?)

  • /jquery-slider/ → Slick + jQuery version
  • /javascript-slider/ → Vanilla JS version
  • /css-slider/ → Native CSS version (experimental features)
  • /images/ → Shared image files used by all demos
  • reset.css → Shared reset stylesheet