Mobile-first Image Carousel With JavaScript – LzSwiper

Category: Javascript , Slider | December 9, 2016
Author: lironzluf
Views Total: 1,045
Official Page: Go to website
Last Update: December 9, 2016
License: MIT

Preview:

Mobile-first Image Carousel With JavaScript – LzSwiper

Description:

LzSwiper is a lightweight, mobile-first swiper that creates a simple image carousel with support for auto play, 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()