SimpleSlider

Simple responsive slider created in pure javascript. Browsers support: All modern browsers, Internet Explorer 10+

Version

1.9.0

Installation

npm

Install the package & import files

npm install simpleslider-js

import SimpleSlider from 'simpleslider-js';
import 'simpleslider-js/dist/simpleslider.min.css';

CDN

Include files using CDN.

https://unpkg.com/[email protected]/dist/simpleSlider.min.js
https://unpkg.com/[email protected]/dist/simpleSlider.min.css

Github

You can also download files from Github and attach them manually to your project. Note: On production use files (JS and CSS) only from dist/ folder.

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

Usage

Include files

See the section above.

Create HTML layout

<div class="simple-slider simple-slider-first">
  <div class="slider-wrapper">
    <!-- First slide -->
    <div class="slider-slide" style="background-image: url('path/to/image')">
      <!-- Any HTML content -->
    </div>

    <!-- Second slide -->
    <div class="slider-slide" style="background-image: url('path/to/image')">
      <!-- Any HTML content -->
    </div>

    <!-- Third slide -->
    <div class="slider-slide" style="background-image: url('path/to/image')">
      <!-- Any HTML content -->
    </div>
  </div>

  <!--Pagination (Not required)-->
  <div class="slider-pagination"></div>

  <!-- Buttons (Not required) -->
  <div class="slider-btn slider-btn-prev"></div>
  <div class="slider-btn slider-btn-next"></div> 
</div>

Initialize the module

<script>
  new SimpleSlider('.simple-slider-first');
</script>

API

Example

new SimpleSlider(container, options)

• container - string (required), selector of slider container
• options - object (optional), slider options

You can initialize more than one slider per page.

<script>
  // Default options
  new SimpleSlider('.simple-slider-first');  

  // User options
  new SimpleSlider('.simple-slider-second', {
    speed: 600,
    autoplay: false,
    class: {
      wrapper: 'slider-wrapper'
    },
    onChange: function(activeSlide) {
      console.log(activeSlide);
    }
  });

  // SlidesPerView example
  new SimpleSlider('.simple-slider-third', {
    slidesPerView: {
      768: 2, // 2 slides for viewport >= 768px
      1024: 3 // 3 slides for viewport >= 1024px
    }
  });
  
  // Access to other slider functions and properties
  var slider = new SimpleSlider('.simple-slider-third');
  console.log(slider);
</script>

Options

| Option | Type | Default value | Description | | ----- | ----- | ----- | ----- | | speed | number | 600 | Transition duration in ms | | delay | number | 5000 | Delay between transitions in ms (autoplay) | | enableDrag | boolean | true | Enable drag option | | autoplay | boolean | false | Slider autoplay | | loop | boolean | true | Slider loop | | slidesPerView | object | 1 | The number of slides to be shown [Read more below] | | class:wrapper | string | 'slider-wrapper' | Wrapper class | | class:slide | string | 'slider-slide' | Slide class | | class:buttons | string | 'slider-btn' | Buttons class | | class:pagination | string | 'slider-pagination' | Pagination class | | class:paginationItem | string | 'pagination-bullet' | Pagination bullet class | | onInit | function | - | Function called after slider initialization | | onChange | function | - | Function called when the slide change start |

Other functions and properties

.attachEvents() - Attach all events .detachEvents() - Detach all events .nextSlide() - Go to the next slide .prevSlide() - Go to the previous slide .index - Get current slide index .wrapper - Slider wrapper .container - Slider container .buttons - Slider buttons .slides - List of slides .slidesWithClones - List of slides with clones .paginationBullets - List of pagination bullets

Comments

slidesPerView - Number of slides can't be bigger than the amount of slides in the slider.