https://github.com/sellersmith/slider-x
🍢 The last jQuery plugin SlideShow @ PageFly
https://github.com/sellersmith/slider-x
carousel css javascript jquery-plugin shopify-slider slideshow
Last synced: 4 months ago
JSON representation
🍢 The last jQuery plugin SlideShow @ PageFly
- Host: GitHub
- URL: https://github.com/sellersmith/slider-x
- Owner: sellersmith
- Created: 2018-09-28T02:53:22.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-02T19:17:10.000Z (about 2 years ago)
- Last Synced: 2024-10-16T04:32:58.555Z (6 months ago)
- Topics: carousel, css, javascript, jquery-plugin, shopify-slider, slideshow
- Language: JavaScript
- Homepage:
- Size: 6.97 MB
- Stars: 57
- Watchers: 23
- Forks: 31
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# 🍢 A simple `jQuery` plugin SlideShow @ [PageFly](https://apps.shopify.com/pagefly)
## Installation
```bash
yarn add slider-x
# or npm i slider-x
```
## Usage
Set up your markup
```html
```
Import the script and init `SliderX`
```js
import 'slider-x'
import 'slider-x/dist/slider-x.css'
let sliderNode = document.querySelector('.your-slider-class-name')
let slider = new SliderX(sliderNode [, options])
```
## Options
```js
let defaultOptions = {
slidesToShow: 1,
slidesToScroll: 1,
gutter: 0,
autoPlay: true,
autoPlayDelay: 3000,
duration: 450,
loop: true,
draggable: true,
paginationStyle: 'pagination-style-1',
navStyle: 'nav-style-1',
adaptiveHeight: false,
height: 400,
}
// Style options, pick one for the `paginationStyle` and `navStyle`
SliderX.styleOptions = {
paginations: ['pagination-style-1', 'pagination-style-2', 'pagination-style-3', 'none'],
navs: ['nav-style-1 fa-caret', 'nav-style-2 fa-angle', 'nav-style-3 fa-angle', 'nav-style-4 fa-long-arrow', 'nav-style-5 fa-long-arrow', 'none']
}
```
## Methods
```js
// Initialize slider
slider.init()
// Update options
slider.updateOptions(newOptions)
// Destroy slider
slider.destroy()
// Go to slider at index
slider.goto(index)
// Go to next slider
slider.next()
// Go to previous slider
slider.prev()
// Pause slider (if `autoPlay` is true)
slider.pause()
// Making it move again (after pausing it)
slider.play()
```
Happy sliding 🍻