Expand - the lightweight pure JS carousel/slider

Expand is a dependency free vanilla js slider/carousel. It was built as an alternative for the often used jQuery carousel "slick" but without depending on jQuery and utilizing the advantages of object oriented programming.

Quick facts:

• 100% free and open source (personal/commercial)
• only 5kb gzipped
• modern ES6 javascript but compiled to ES5 for a larger browser compatibility
• available via CDN: https://cdn.jsdelivr.net/gh/faesslich/expand/dist/

Basic usage:

HTML:

<div class="expand-js-outer">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

JS (ES6 import):

import Expand from 'expand';
new Expand();

JS static include:

<script src="dist/expand.umd.min.js"></script>
<script>
    new Expand();
</script>

Advanced usage:

HTML (with a custom selector and data-attribute with additional options):

<div class="expand-js-outer custom-selector" data-options='
    {
        "arrows": true,
        "visibleSlides": {
            "768": 2,
            "1024": 3,
            "1280": 4
        }
    }
'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

JS (ES6 import + a huge amount of options):

import Expand from 'expand';

const customExpandSelector = document.querySelector('.custom-selector');
const customExpandSelectorDemo = new Expand(
    {
        selector: customExpandSelector,
        duration: 300,
        easeMode: 'ease-out',
        visibleSlides: {
            100: 1,
            768: 2,
            1024: 3,
            1280: 5
        },
        startIndex: 0,
        draggable: true,
        multipleDrag: true,
        triggerDistance: 30,
        slidesToSlide: 2,
        autoplay: true,
        autoplayDuration: 5000,
        arrows: true,
        arrowsVisible: {
            100: false,
            1024: true,
            1280: false
        },
        prevArrowClass: 'expand-js--prev expand-custom-arrows',
        nextArrowClass: 'expand-js--next expand-custom-arrows',
        prevArrowInner: '<span>«</span>',
        nextArrowInner: '<span>»</span>',
        rtl: true,
        keyboard: true,
        loop: true,
        centerMode: true,
        centerModeRange: true
    }, 
    JSON.parse(customExpandSelector.dataset.options)
);

Huge amount of examples in the DEMO.

Options

{
  selector: '.expand-js-outer',
  itemSelector: '.expand-js--item',
  visibleSlides: 1,
  useCssFile: true,
  cssCustomPath: '',
  startIndex: 0,
  draggable: true,
  multipleDrag: true,
  triggerDistance: 20,
  loop: true,
  rtl: false,
  duration: 500,
  easeMode: 'ease-out',
  slidesToSlide: 1,
  activeClass: true,
  centerMode: false,
  centerModeRange: false,
  pagination: false,
  paginationVisible: true,
  paginationType: '',
  paginationContainer: 'expand-pagination',
  paginationItemSelector: '',
  paginationItemActiveClass: 'active',
  autoplay: false,
  autoplayDuration: 3000,
  arrows: false,
  arrowsVisible: true,
  prevArrowClass: 'expand-js--prev',
  nextArrowClass: 'expand-js--next',
  prevArrowInner: '‹',
  nextArrowInner: '›',
  gap: 0,
  keyboard: false,
  onInit: () => {},
  onChange: () => {}
}

Key	Type	Default	Description
selector	(string or DOM node)	.expand-js-outer	Option to add a custom selector for your slider container.
itemSelector	(string or DOM node)	.expand-js--item	Option to add a custom selector for your items.
visibleSlides	(number or object)	1	Select how many slides are visible. Static (number) or responsive (object).
useCssFile	(boolean)	true	Determine if CSS classes should be used or if inline-styles are the way to go. Not using CSS is not recommended especially for advanced usage.
cssCustomPath	(string)		Add a path to the CSS file that should be used. (optional)
startIndex	(number)	1	Select at which slide the slider/carousel should start on initialization.
draggable	(boolean)	true	Select if slider/carousel should be draggable.
multipleDrag	(boolean)	true	Select if slider/carousel should be able to slide over multiple slides.
triggerDistance	(number)	20	Select the trigger distance on dragging a slide.
loop	(boolean)	true	Select if slider/carousel should loop.
rtl	(boolean)	false	Select if slider/carousel should go right-to-left.
duration	(number)	500	Change the speed of the slides change.
easeMode	(string)	ease-out	Change the ease mode. But it's not recommended or needed anyway.
slidesToSlide	(number)	1	Select how many slided should slide on e.g. nextSlide event. Note: Not working if multipleDrag is set to false
activeClass	(boolean)	true	Select if the visible slides should get an active class.
centerMode	(boolean)	false	Select if the slides in the middle should get an center class for highlighting.
centerModeRange	(boolean)	false	Select if the slides next to the centered slide should get an extra class for highlighting.
pagination	(boolean)	false	Select if slider/carousel should have a pagination.
paginationVisible	(boolean or object)	true	Select if/when pagination should be visible. Static (number) or responsive (object).
paginationType	(string)		_Options: or dots _
paginationContainer	(string)	expand-pagination	Option to add a custom selector for your pagination container
paginationItemSelector	(string)		Option to add a custom selector for your pagination items
paginationItemActiveClass	(string)	active	Option to add a custom selector for your pagination item active classes.
autoplay	(boolean)	false	Select if slider/carousel should have autoplay enabled.
autoplayDuration	(number)	3000	Set the speed of autoplay.
arrows	(boolean)	false	Select if slider/carousel should have an arrows navigation.
arrowsVisible	(boolean or object)	true	Select if/when arrows navigation should be visible. Static (number) or responsive (object).
prevArrowClass	(string)	expand-js--prev	Changes the class of previous button in arrow navigation.
nextArrowClass	(string)	expand-js--next	Changes the class of next button in arrow navigation.
prevArrowInner	(string)	‹	Changes the innerHTML/innerText of previous button in arrow navigation.
nextArrowInner	(string)	›	Changes the innerHTML/innerText of next button in arrow navigation.
gap	(number)	0	Set a gap at the end of the slider to see a part of the upcoming slide.
keyboard	(boolean)	false	Select of keyboard navigation should be enabled.
onInit	(function)	() => {}	Add a custom method that runs after slider/carousel has been initialized.
onChange	(function)	() => {}	Add a custom method that runs after a slide has changed.

API usages

Method	Parameter
goToSlide	index (int), cb (callback method), delay (time in ms until callback is fired)
nextSlide	countSlides (int), cb (callback method), delay (time in ms until callback is fired)
prevSlide	countSlides (int), cb (callback method), delay (time in ms until callback is fired)
remove	index (int), cb (callback method), delay (time in ms until callback is fired)
insertElem	item (dom element), index (int), cb (callback method), delay (time in ms until callback is fired)
prependElem	item (dom element), index (int), cb (callback method), delay (time in ms until callback is fired)
appendElem	item (dom element), index (int), cb (callback method), delay (time in ms until callback is fired)
destroy	restore (boolean), cb (callback method), delay (time in ms until callback is fired)

A few examples of the API usage can be found in the DEMO.

Browser support

• Chrome >= 27
• Firefox >= 21
• Opera >= 23
• Safari >= 9.1
• Edge >= 12
• Android Browser >= 4.4
• iOS Safari >= 9.2
• IE 11 (just partial, but... who cares)