Mobile-first Image Carousel With JavaScript – LzSwiper

LzSwiper is a lightweight, mobile-first swiper that creates a simple image carousel with support for autoplay, RTL, custom navigation and touch swipe events.

How to use it:

Load the LzSwiper’s Javascript LzSwiper.js and Stylesheet LzSwiper.css in your html document.

<link rel="stylesheet" href="LzSwiper.css">
<script src="LzSwiper.js"></script>

The basic html structure for the swiper.

<div class="swiper-container" id="slider">
  <div class="swiper-wrapper">
      <div class="swiper-slide">
          <img src="1.jpg"/>
      </div>
      <div class="swiper-slide">
          <img src="2.jpg"/>
      </div>
      <div class="swiper-slide">
          <img src="3.jpg"/>
      </div>
  </div>
</div>

Initialize the LzSwiper to generate a simple carousel.

var sliderObjects = {
    slider: document.getElementById('slider'), // the swiper container element
    wrapper: document.getElementsByClassName('swiper-wrapper')[0], // the slides wrapping element
    slides: document.getElementsByClassName('swiper-slide') // all the slide elements
};
var Swiper = new LzSwiper(sliderObjects);

Default customization options which can be passed as the second parameter to the LzSwiper method.

var sliderObjects = {
    slider: document.getElementById('slider'), // the swiper container element
    wrapper: document.getElementsByClassName('swiper-wrapper')[0], // the slides wrapping element
    slides: document.getElementsByClassName('swiper-slide') // all the slide elements
};
var params = {
    callback: undefined,
    rtl: false,
    showButtons: false,
    spacing: 0,
    autoSlideIntervalMsec: 2000,
    loop: false
};
var Swiper = new LzSwiper(sliderObjects,params);

API method.

// Returns the number of slides.
Swiper.getNumberOfSlides() 
// Returns the slide width.
Swiper.getSlideWidth()
// Returns the current slide's index.
Swiper.getSlideIndex()
// To be used with auto param. Starts the auto slide mode.
Swiper.startAutoSlide()
// Stops the auto slide mode.
Swiper.stopAutoSlide()