Carousel / Slider - built using vanilla javascript. Library is framework independent and can be used with any framework/ platform.

• Vanilla Javascript based carousel/ slider.
• Uses Javascript ES6 version based Web Component structure.
• Superfast performance, no third-party framework needed.
• Framework independent, use with any framework (react, angular, etc...).
• Very easy to integrate in any framework.
• Fully responsive. Scales with its container.
• Separate settings per breakpoint.
• Uses CSS3. Fully functional.
• Swipe enabled. Or disabled, if you prefer.
• Desktop mouse dragging.
• Infinite looping.
• Fully accessible with arrow key navigation.
• Add, remove, filter & unfilter slides.
• Autoplay, dots, arrows, callbacks, etc...

Documentation is available @ https://apslider.devamish.com/

type: boolean default: true

• Enables tabbing and arrow key navigation

type: boolean default: false

• Enables adaptive height for single slide horizontal carousels

type: boolean default: false

• Enables Autoplay

type: int(ms) default: 3000

• Autoplay Speed in milliseconds

type: boolean default: true

• Prev/Next Arrows

type: string default: null

• Set the slider to be the navigation of other slider (Class or ID Name)

type: string default: document.querySelector(element)

• Change where the navigation arrows are attached (Selector, htmlString, Array, Element)

type: string default: document.querySelector(element)

• Change where the navigation dots are attached (Selector, htmlString, Array, Element)

type: string (html selector) | object (DOM node) default: <button class="apslider-prev" aria-label="Previous" type="button">Previous</button>

• Allows you to select a node or customize the HTML for the "Previous" arrow

type: string (html selector) | object (DOM node) default: <button class="apslider-next" aria-label="Next" type="button">Next</button>

• Allows you to select a node or customize the HTML for the "Next" arrow

type: boolean default: false

• Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts

type: string default: '50px'

• Side padding when in center mode (px or %)

type: string default: 'ease'

• CSS3 Animation Easing

type: function default: n/a

• Custom paging templates. See source for use example

type: boolean default: false

• Show dot indicators

type: string default: 'apslider-dots'

• Class for slide indicator dots container

type: boolean default: true

• Enable mouse dragging

type: boolean default: false

• Enable fade

type: boolean default: false

• Enable focus on selected element (click)

type: string default: 'linear'

• Add easing for jQuery animate. Use with easing libraries or default easing methods

type: integer default: 0.15

• Resistance when swiping edges of non-infinite carousels

type: boolean default: true

• Infinite loop sliding

type: integer default: 0

• Slide to start on

type: string default: 'ondemand'

• Set lazy loading technique. Accepts 'ondemand' or 'progressive'

type: boolean default: false

• Responsive settings use mobile first calculation

type: boolean default: true

• Pause Autoplay On Focus

type: boolean default: true

• Pause Autoplay On Hover

type: boolean default: false

• Pause Autoplay when a dot is hovered

type: string default: 'window'

• Width that responsive object responds to. Can be 'window', 'slider' or 'min' (the smaller of the two)

type: object default: none

• Object containing breakpoints and settings objects (see demo). Enables settings sets at given screen width. Set settings to "destroyed" instead of an object to disable apslider at a given breakpoint

type: int default: 1

• Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row

type: element default: ''

• Element query to use as slide

type: int default: 1

• With grid mode intialized via the rows option, this sets how many slides are in each grid row

type: int default: 1

• # of slides to show

type: int default: 1

• # of slides to scroll

type: int(ms) default: 300

• Slide/Fade animation speed

type: boolean default: true

• Enable swiping

type: boolean default: false

• Allow users to drag or swipe directly to a slide irrespective of slidesToScroll

type: boolean default: true

• Enable slide motion with touch

type: int default: 5

• To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider

type: boolean default: false

• Variable width slides

type: boolean default: false

• Vertical slide mode

type: boolean default: false

• Vertical swipe mode

type: boolean default: false

• Change the slider's direction to become right-to-left

type: boolean default: true

• Ignores requests to advance the slide while animating

type: number default: 1000

• Set the zIndex values for slides, useful for IE9 and lower