jQuery Slider (Slick)

What’s happening on this page?

This slider uses a classic “jQuery-era” approach: we include jQuery, we include a plugin (Slick), and then we run a short setup script that tells Slick to turn our HTML into a carousel.

1) The HTML (structure)

• .slider is the main container Slick looks for.
• Each direct child inside .slider becomes one slide.
• Inside each slide, you can put an image, text, buttons, captions, etc.

2) The CSS (appearance)

• Slick provides default slider styling via slick.css and slick-theme.css.
• Your file jquery-slider.css controls the “look” of the images (size, cropping, borders, etc.).
• In your CSS, you can choose:
  • object-fit: cover (fills frame, crops)
  • object-fit: contain (shows full image, may letterbox).

3) The JavaScript (behavior)

The file slider-init.js is where Slick is activated. It usually looks like this:

$(function () {
  $(".slider").slick({
    dots: true,
    arrows: true,
    infinite: true,
    speed: 350,
    autoplay: false
  });
});

Customization options to try

File: slider-init.js
These options go inside $(".slider").slick({ ... }). Try turning ONE option on/off at a time so you can see what it changes.

Starter set (safe + useful)

// Show multiple slides at once (thumbnails / galleries)
slidesToShow: 2,
slidesToScroll: 1,

// Cross-fade instead of sliding (works best with slidesToShow: 1)
fade: true,

// Allow dragging with mouse / touch
draggable: true,
swipe: true,

Autoplay (use carefully)

// Autoplay can be distracting. Use with care.
autoplay: true,
autoplaySpeed: 2000,
pauseOnHover: true,

Height behavior (can cause page jumping)

// Makes slider height match each slide’s content.
// WARNING: can cause the page to jump up/down between slides.
adaptiveHeight: true,

Troubleshooting checklist

• If the images stack vertically, Slick did not initialize.
• Open DevTools → Console. Look for red errors.
• Make sure jQuery loads before Slick.
• Make sure slider-init.js targets .slider exactly.
• Make sure your image paths are correct.

Why teach this version?

This “plugin approach” is historically important and still used in many older codebases. It also shows the tradeoff: you get lots of features quickly, but you add dependency files and rely on someone else’s code.