Basic Slider Carousel Plugin For JavaScript – SMSlider

Category: Javascript , Slider | May 10, 2018
Views Total:686 views
Official Page:Go to website
Last Update:May 10, 2018


Basic Slider Carousel Plugin For JavaScript – SMSlider


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


  • 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">
    Text slide
     <img src="1.jpg" alt="">
     <img src="2.jpg" alt="">

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
// backs previous one
// go to next one

You Might Be Interested In:

Leave a Reply