Skip to content

YodasMyDad/Slicker

BranchesTags

Repository files navigation

Slicker Carousel

Version 1.0.0 - Vanilla TypeScript rewrite with zero dependencies

About This Version

Slicker is the modern TypeScript rewrite of Ken Wheeler's Slick carousel (Credits and links below). It keeps every feature, removes the jQuery requirement, and ships both ES modules and UMD builds with a single unified CSS file.

  • No dependencies - no jQuery required
  • Modern JavaScript (ES6+) with TypeScript types included
  • Smaller bundles and faster performance via native DOM APIs
  • Single CSS file combining core and theme styles
  • Same API surface as the original Slick

Quick Start

1. Include CSS (single unified stylesheet)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yodasmydad/slicker@1.0.0/slicker.css">

2. Include JavaScript

<script src="https://cdn.jsdelivr.net/npm/@yodasmydad/slicker@1.0.0/slicker.js"></script>

3. Initialize

<div class="my-slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

<script>
  var slider = Slicker.init('.my-slider', {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  });
</script>

Installation

CDN (Recommended)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yodasmydad/slicker@1.0.0/slicker.css">
<script src="https://cdn.jsdelivr.net/npm/@yodasmydad/slicker@1.0.0/slicker.js"></script>
<script>
  var slider = Slicker.init('.slider', {
    dots: true,
    arrows: true  // enabled by default
  });
</script>

npm

npm install @yodasmydad/slicker

ES Module

import Slicker from '@yodasmydad/slicker';

const slider = Slicker.init('.slider', {
  dots: true,
  arrows: true
});

TypeScript

import Slicker, { SlickerOptions } from '@yodasmydad/slicker';

const options: Partial<SlickerOptions> = {
  dots: true,
  slidesToShow: 3
};

const slider = Slicker.init('.slider', options);

Migration from jQuery Slick

Before (jQuery Slick)

$('.slider').slick({
  dots: true,
  arrows: true
});

$('.slider').slick('slickNext');
$('.slider').on('afterChange', function(event, slick, currentSlide) {
  console.log(currentSlide);
});

After (Slicker)

var slider = Slicker.init('.slider', {
  dots: true,
  arrows: true
});

slider.slickNext();
document.querySelector('.slider').addEventListener('afterChange', function(e) {
  console.log(e.detail[1]); // currentSlide
});

All original options behave the same; the global name and import paths now use Slicker. The legacy jQuery bundle is still available in slick/ if you need it.

Settings

All original Slick options are supported by Slicker:

Option Type Default Description
accessibility boolean true Enables tabbing and arrow key navigation
adaptiveHeight boolean false Adapts slider height to the current slide
appendArrows HTMLElement|string element Where navigation arrows are attached
appendDots HTMLElement|string element Where navigation dots are attached
arrows boolean true Enable Next/Prev arrows
asNavFor HTMLElement|string null Enables syncing of multiple sliders
autoplay boolean false Enables auto play of slides
autoplaySpeed int 3000 Auto play change interval
centerMode boolean false Enables centered view with partial prev/next slides
centerPadding string '50px' Side padding when in center mode (px or %)
cssEase string 'ease' CSS3 easing
customPaging function n/a Custom paging templates
dots boolean false Current slide indicator dots
dotsClass string 'slick-dots' Class for slide indicator dots container
draggable boolean true Enables desktop dragging
easing string 'linear' Fallback easing
edgeFriction number 0.35 Resistance when swiping edges of non-infinite carousels
fade boolean false Enables fade
focusOnSelect boolean false Enable focus on selected element (click)
focusOnChange boolean false Puts focus on slide after change
infinite boolean true Infinite looping
initialSlide integer 0 Slide to start on
lazyLoad string 'ondemand' 'ondemand', 'progressive', or 'anticipated'
mobileFirst boolean false Responsive settings use mobile first calculation
nextArrow string|HTMLElement <button...>Next</button> Customize the "Next" arrow
pauseOnDotsHover boolean false Pauses autoplay when a dot is hovered
pauseOnFocus boolean true Pauses autoplay when slider is focused
pauseOnHover boolean true Pauses autoplay on hover
prevArrow string|HTMLElement <button...>Previous</button> Customize the "Previous" arrow
respondTo string 'window' 'window', 'slider' or 'min'
responsive array null Array of breakpoint settings objects
rows int 1 Grid mode - number of rows
rtl boolean false Change direction to right-to-left
slide string '' Slide element query
slidesPerRow int 1 Slides per row in grid mode
slidesToScroll int 1 Number of slides to scroll at a time
slidesToShow int 1 Number of slides to show at a time
speed int 500 Transition speed (ms)
swipe boolean true Enables touch swipe
swipeToSlide boolean false Swipe to slide irrespective of slidesToScroll
touchMove boolean true Enables slide moving with touch
touchThreshold int 5 Swipe distance threshold
useCSS boolean true Enable/Disable CSS Transitions
useTransform boolean true Enable/Disable CSS Transforms
variableWidth boolean false Disables automatic slide width calculation
vertical boolean false Vertical slide direction
verticalSwiping boolean false Changes swipe direction to vertical
waitForAnimate boolean true Ignores requests to advance slide while animating
zIndex number 1000 Set the zIndex values for slides

Events

Events are dispatched as native CustomEvents:

var sliderElement = document.querySelector('.slider');

sliderElement.addEventListener('afterChange', function(e) {
  var slick = e.detail[0];
  var currentSlide = e.detail[1];
  console.log('Changed to slide:', currentSlide);
});
Event Detail Description
afterChange [slick, currentSlide] After slide change
beforeChange [slick, currentSlide, nextSlide] Before slide change
breakpoint [slick, breakpoint] After a breakpoint is hit
destroy [slick] When slider is destroyed
edge [slick, direction] Overscrolled in non-infinite mode
init [slick] When Slicker initializes
reInit [slick] Every time Slicker re-initializes
setPosition [slick] Every time Slicker recalculates position
swipe [slick, direction] After swipe/drag
lazyLoaded [slick, image, imageSource] After image loads lazily
lazyLoadError [slick, image, imageSource] After image fails to load

Methods

Methods are called directly on the Slicker instance:

var slider = Slicker.init('.slider', { dots: true });

// Navigate
slider.slickNext();
slider.slickPrev();
slider.slickGoTo(2);
slider.slickGoTo(3, true); // skip animation

// Control
slider.slickPause();
slider.slickPlay();

// Modify
slider.slickAdd('<div>New Slide</div>');
slider.slickRemove(0);
slider.slickFilter('.filter-class');
slider.slickUnfilter();

// Query
var current = slider.slickCurrentSlide();
var option = slider.slickGetOption('speed');

// Update
slider.slickSetOption('speed', 1000, true);
slider.slickSetOption({
  dots: false,
  arrows: true
}, true);

// Destroy
slider.unslick();
Method Arguments Description
slickNext - Go to next slide
slickPrev - Go to previous slide
slickPause - Pause autoplay
slickPlay - Start autoplay
slickGoTo index, dontAnimate Go to slide by index
slickCurrentSlide - Returns current slide index
slickAdd markup, index, addBefore Add a slide
slickRemove index, removeBefore Remove a slide
slickFilter selector Filter slides
slickUnfilter - Remove filter
slickGetOption option Get an option value
slickSetOption option, value, refresh Set option(s)
getSlick - Get Slicker instance
unslick - Destroy Slicker

Responsive Example

Slicker.init('.slider', {
  slidesToShow: 4,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

Browser Support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)
  • IE11 (requires polyfills for Object.entries, etc.)

Build From Source

# Install dependencies
npm install

# Development mode
npm run dev

# Build for production
npm run build

# Output files:
# - slicker.js (UMD, minified)
# - slicker.esm.js (ES Module)
# - slicker.css (styles)
# - index.d.ts (TypeScript definitions)

Improvements

  • No jQuery dependency (smaller and faster)
  • Modern ES6+ code and tree-shakeable modules
  • Full TypeScript support
  • Better performance with native APIs
  • Smaller bundle size

Project Structure

slicker.js       # UMD build (minified)
slicker.esm.js   # ES Module build
slicker.css      # Unified stylesheet
index.d.ts       # TypeScript definitions
src/             # TypeScript source (includes slicker.scss)
slick/           # Original jQuery Slick distribution for reference/legacy
index.html       # Examples and demos

Credits

Original Slick Carousel

Created by: Ken Wheeler
Original Repository: https://github.com/kenwheeler/slick
License: MIT

Ken's original Slick carousel revolutionized web carousels with its feature-rich, accessible approach. The Slicker rewrite preserves his vision while modernizing the codebase. The untouched original files remain in slick/ for reference and legacy use.

License

MIT License

Copyright (c) 2017 Ken Wheeler
Copyright (c) 2025 Lee Messenger

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

Complete modern rewrite of the Slick carousel

Topics

carousel-slider

Resources

Readme
Activity

Stars

3 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases 1

v1.0.0 Release Latest
Nov 22, 2025

Contributors

Languages