Press "Enter" to skip to content

Extremely Lightweight Carousel Micro-library | simpleSlider.js

simple-slider is a very lightweight circular little library based on the requestAnimationFrame interface. It makes a highly testable application that is less dependent on CSS.

implement a simple image carousel using vanilla javascript, simple javascript carousel, javascript carousel example, carousel library

Features

  • Small size, less than 1.1KB minified/compressed.
  • UMD support: AMD, CommonJS, and generic definition.
  • requestAnimationFrame is used for animation.
  • Supports Page Visibility API to pause/resume transitions when the user has moved away from the page.
  • Accept the ease functions to customize the transition animation.
  • Lots of ready-to-use examples are available, just check the folder example.
  • Animate any numeric CSS property.

3D Image Rotator Slider Using CSS3 & jQuery | rotateSlider

How to make use of it:

1. Simply load the main JavaScript file simpleslider.js into the document.

<script src="simpleslider.js"></script>

2. You can load the Hammer.js library to provide swipe gesture support.

<script src="/path/to/hammer.min.js"></script>

3. Insert a series of images into the slider container as follows:

<div id="myslider" class="slider">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  ...
</div>

4. Setting up the library.

simpleslider.getSlider({
  container: document.getElementById('myslider')
});

5. All possible options to customize the scroll bar.

simpleslider.getSlider({
  // he HTML element that act as a container for the slider.
  container: document.querySelector('*[data-simple-slider]),
  // A list of children to be used as slides.
  // You can use the querySelectorAll to have more flexibility on what children of the container element should be used as slides. 
  children: container.children,
  // Controls carousel auto-transition/slideshow. If value is true no transition will happen. 
  paused: false, 
  // Determines the css property to be animated.
  prop: left,
  // Tthe duration of animation transition.
  duration: 0.5,
  // Value determining the wait between each animation when auto-transition is enabled. 
  delay: 3000,
  // Initial value of slide elements when starting a transition animation. 
  init: -100,
  // The value a slide element should have when it is displayed.
  show: 0,
  // The value a slide will move to during a transition animation.
  end: 100,
  // The css unit value to be used. 
  unit: '%',
  // An ease function, you can use any of these. Defaults to defaultEase internal function.
  ease: function(){},
  // Invoked each time a slide changes.
  onChange: function(){},
  // Invoked at the end of the slide transition.
  onChangeEnd: function(){}
});

Available Examples

  • Responsive layout example
  • Default slider with no options
  • Default slider with options
  • Fading/Opacity transition
  • Full page transition
  • Lightbox integrated
  • Mask sliding transition
  • Pause slide
  • RequireJS usage
  • Reverse sliding direction
  • Right to left sliding transition
  • Slides containing no images
  • Top to bottom transition
  • Touch swipe example
  • Custom ease animation

Available methods:

  • currentIndex() Returns the index of the current displaying image.
  • pause() Pauses the slideshow.
  • resume() Resumes the slideshow.
  • reverse() Swaps init for end and reverses the order of slides.
  • nextIndex() Gets the index of the next slide to be shown.
  • prevIndex() Gets the index of the previous slide.
  • next() Switches displaying an image to the next one.
  • prev() Switches displaying images to the previous one.
  • change(index) Changes image to a given index value.
  • dispose() Disposes of all internal variable references.

dead simple image carousel, lightweight carousel micro-library Plugin/Github


See Demo And Download

Official Website(ruyadorno): Click Here

This superior jQuery/javascript plugin is developed by ruyadorno. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.