slither-slider v2.11.0

Slither Slider

Simple Vue JS slider for Vue JS that pretty much takes what you throw at it.

Demo

Click below to see some examples of what you can pull off. All source for that demo is located in "App.vue"

Demo

Usage

Register the plugin

import SlitherSlider from 'slither-slider';
Vue.use(SlitherSlider)

In your component

<slither-slider :options="{fullscreen:true}">
  <!-- Slide 1 -->
  <div :style="{backgroundColor: 'red', height:'1000px'}">Oh</div>

  <!-- Slide 2 -->
  <div>
    Mah
    <img src="https://picsum.photos/id/237/200/300" />
  </div>

  <!-- Slide 3 -->
  <div>Gawd</div>
</slither-slider>

Using components as Slides

<slither-slider :options="{fullscreen:true}">
  <!-- Slide 1 -->
  <custom-component>
    Component One
  </custom-component>

  <!-- Slide 2 -->
  <custom-component>
    Component Two
  </custom-component>

  <!-- Slide 3 -->
  <other-custom-component>
    Component Three
  </other-custom-component>
</slither-slider>

Options

{
  autoplay: false,
  transition: "slide",
  dots: true,
  animatedDots: false,
  dotLimit: false,
  fullscreen: false,
  fullscreenOffset: null,
  controls: true,
  numberOfSlides: 1,
  controlsWrapperClass: null,
  animationDuration: 500,
  animationEasing: "easeOutQuint",
  slidePosition: "center",
  slideClass: null,
  sliderClass: null,
  secondsOnSlide: 4,
  clickableSlides: false,
  endless: false,
  cuts: "right",
  gap: 30,
  adaptiveHeight: false,
  loop: true,
  extras: 3,
  overflowHiddenPadding: { top: 0, left: 0, right: 0, bottom: 0 },
  touch: true,
  preserveGrid: false,
  swipeTolerance: 80
}

Events

Methods

Basic example:

<slither-slider ref="slider">
  ...
</slither-slider>

this.$refs.slider.reload();

See the DynamicSlides component for a real world exampleß

Styles

Styles are fairly minimal out of the box so here are some that you may want to use to get started that represent what you're probably used to seeing and then you can modify from there.

// Ensure you include the main styles and modify this path to suite your needs
@import "./node_modules/slither-slider/plugin-dist/slither-slider.css";

.slider-slide {
  margin: 0 200px;
}

.slider-slides {
  padding-bottom: 100px;
}

.slider-dot {
  width: 20px;
  height: 20px;

  &.active-slide {
    background-color: #8fc7e8;
    color: #8fc7e8;
  }
}

Lazy Loading

In 2.0 lazy loading happens by the very nature of how Vue works. There's nothing special you have to do here.

Custom Controls

In your component you can add a couple of slots that will override the control button contents like-a-so:

<slither-slider>
  <!-- Slides -->
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>

  <!-- Controls -->
  <template slot="previous">
    Before
  </template>
  <template slot="next">
    After
  </template>
</slither-slider>

Responsive Slide Numbers

You can control how many slides show per page at different responsive sizes like so:

<slither-slider
  :options="{
          dots: true,
          numberOfSlides: [
            { number: 1, min: 0 },
            { number: 2, min: 780 }
          ]}"
>
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 4</div>
  <div>Slide 5</div>
  <div>Slide 6</div>
  <div>Slide 7</div>
  <div>Slide 8</div>
</slither-slider>

Development

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for docs, library and plugin

build-all

Publishes the docs to gh-pages

publish-docs

Compiles and minifies for library and plugin

build-lib

Compiles and minifies for library

build-lib:library

Compiles and minifies for plugin

build-lib:plugin

Compiles and minifies for documentation

yarn run build

Run your tests

yarn run test

Lints and fixes files

yarn run lint

Customize configuration

See Configuration Reference.

Snake Illustration: www.vecteezy.com