Skip to content

ventinus/slipnslider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

75 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SlipnSlider

Another Slider?

Sure is. While there are many slider plugins available with a multitude of configurable options, they still seem to have restrictions with having dependencies and even performance issues. Highlights of this slider:

  • All vanilla Javascript (written in ES6 and compiled to ES5 with Babel)
  • Many configurable options (with more to come!) without over-bloating the code
  • All options are definable within responsive breakpoints
  • Extremely fast initialization, tear down, and re-initialization process (unnoticeable)

Current options include (with defaults):

  1. isInfinite: false
  • Determines whether slider appears to be infinite with no end in either direction
  1. hasDotNav: true
  • Handles display property of the dots for showing relevant
  1. hasControls: true
  • Handles whether the prev and next buttons get created and appended
  1. navContainer: Slider DOM Element
  • DOM Node for appending the prev and next buttons to (appends ul with li children)
  1. dotsContainer: Slider DOM Element
  • DOM Node for appending the dots to
  1. navText: ['prev', 'next']
  • Text/HTML to have rendered inside of the prev and next button tags
  1. slideElement: 'div'
  • Which element tag to have as your slide
  1. stageElement: 'div'
  • Which element tag to have as the stage/slides-wrapper
  1. slidePadding: 10
  • Space between the slides (measured in pixels)
  1. slidesPerPage: 1
  • How many full slides desired to have in view at a single time
  1. prevNavigationCallback: function(direction) { console.log('prev callback', direction); }
  • Callback to hook into the previous navigation function
  1. nextNavigationCallback: function(direction) { console.log('next callback', direction); }
  • Callback to hook into the next navigation function
  1. dotClickCallback: function(prevIndex, nextIndex) { console.log('dot click callback', prevIndex, nextIndex); }
  • Callback to hook into clicking a dot
  1. responsive: {}
  • Allows for customizeable options at certain window widths. Define a key that is the window width min, and the value is an object with any of the key value options defined above. For Example:
responsive: {
  0: {
    slidesPerPage: 1,
    isInfinite: false
  },
  420: {
    slidesPerPage: 2,
    isInfinite: true
  }
}

Errors or want more features?

Submit an issue or pull request.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors