Basic Slider Carousel Plugin For JavaScript – SMSlider

Preview:

Description:

SMSlider is a simple yet configurable slider JavaScript plugin for creating your own carousels on the web app.

Features:

• Autoplay
• Vertical or horizontal sliding.
• Pagination and navigation controls.
• Allows to slide through slides via mouse drag.
• Thumbnails navigation.
• Easing functions.
• Supports any elements not only images.

How to use it:

Insert the bundled JavaScript file into the document.

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

The html structure for the slider.

<div id="mySlider">
  <div>
    Text slide
  </div>
  <div>
     <img src="1.jpg" alt="">
  </div>
  <div>
     <img src="2.jpg" alt="">
  </div>
</div>

Initialize the slider and specify the container element.

var instance = new SMSlider({
    container: "mySlider"
});

Config the slider by passing the following options to the SMSlider object.

var instance = new SMSlider({

    // enables autoplay
    autoplay : true,

    // current slide index
    currentSlide: 0,

    // shows navigation
    navigator : true,

    // shows pagination
    dots : true,

    // background color
    background: '#eff1f4',

    // how many slides per view
    slidesInView: 1,

    // is swipeable?
    swipeable: true,

    // in seconds
    sliderTransitionTime: 2,

    // or 'vertical'
    direction: 'horizontal',

    // border property
    border: 'none',

    // enables thumbnails navigation
    thumbnails: false,

    // how many thumbnails per view
    thumbnailsInView: 3,

    // 'ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out'
    transitionFlow: 'ease'
    
});

Available API methods to control the slider programmatically.

// display a specific slide
instance.displaySlide(index)

// backs previous one
instance.moveSlideBackward()

// go to next one
instance.moveSlideForward()