# simpleslider-js

> Responsive slider created in pure Javascript

Latest version **1.9.0** (published 2019-10-06) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install simpleslider-js
pnpm add simpleslider-js
yarn add simpleslider-js
bun add simpleslider-js
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.9.0 |
| Published | 2019-10-06 |
| First published | 2018-09-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 60.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 29 |
| Author | Michał Strumpf |
| Maintainers | michu2k |
| Keywords | slider, javascript, es6, carousel, simpleslider, slideshow, javascript-library |

## Links

- npm: https://www.npmjs.com/package/simpleslider-js
- Repository: https://github.com/michu2k/SimpleSlider
- Homepage: https://github.com/michu2k/SimpleSlider#readme
- Issues: https://github.com/michu2k/SimpleSlider/issues
- npm.io page: https://npm.io/package/simpleslider-js

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 1.9.0 (latest) — 2019-10-06
- 1.8.0 — 2019-05-03
- 1.7.0 — 2018-09-04

## README

# SimpleSlider
Simple responsive slider created in pure javascript.
<br> Browsers support: All modern browsers, Internet Explorer 10+

## Version
1.9.0

## Installation

###### npm
Install the package & import files

```
npm install simpleslider-js
```

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

###### CDN
Include files using CDN.

```
https://unpkg.com/simpleslider-js@1.9.0/dist/simpleSlider.min.js
https://unpkg.com/simpleslider-js@1.9.0/dist/simpleSlider.min.css
```

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

```html
<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
```html
<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
```javascript
<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.

```javascript
<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 <br>
`.detachEvents()` - Detach all events <br>
`.nextSlide()` - Go to the next slide <br>
`.prevSlide()` - Go to the previous slide <br>
`.index` - Get current slide index <br>
`.wrapper` - Slider wrapper <br>
`.container` - Slider container <br>
`.buttons` - Slider buttons <br>
`.slides` - List of slides <br>
`.slidesWithClones` - List of slides with clones<br>
`.paginationBullets` - List of pagination bullets

###### Comments

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

---
_Source: https://npm.io/package/simpleslider-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._