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

Related tags

vuejs vue slider vue-js-slider
Overview

Slither Slider

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

Minified

Snakes.... I hate snakes

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}">
  
  <div :style="{backgroundColor: 'red', height:'1000px'}">Ohdiv>

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

  
  <div>Gawddiv>
slither-slider>

Using components as Slides

There is one thing to keep in mind when passing components a any part of your slides. Ensure that you are not loading your component through asynchronous methods. This is a bug I would **love** to fix so if you have any insights do let me know.
<slither-slider :options="{fullscreen:true}">
  
  <custom-component>
    Component One
  custom-component>

  
  <custom-component>
    Component Two
  custom-component>

  
  <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,
  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
}
Option Default Effect
autoplay false You know what this does.
transition 'slide' Transition can be set to 'fade' or 'slide' (currently only slide working)
dots true Show dots at the bottom
animatedDots false Makes the dots scale up as they approach the slide it represents
dotLimit false Limits the number of dots and scrolls in new ones as needed.
fullscreen false Makes the slideshow fill the height of the screen
fullscreenOffset null When fullscreen is true it adds this number -200 would subtract 200 pixels this works well for heros with consideration for the nav
controls true Show the previous and next buttons
numberOfSlides 1 Creates pages and shows n number of slides at a time. Optionally, you can add an object with "number" and "min" properties to define the number of slides and minimum width respectively. See examples.
controlsWrapperClass null (String) Adds these classes to the wrapper around the controls
animationDuration 500 How long the animation takes
animationEasing "easeOutQuint" The easing of the animation - options can be found at anime.js documentation page here
slidePosition "center" "center", "left", and "right" are your options.
secondsOnSlide 4 This is the number of seconds slither will pause on a slide before moving foward (autoplay must be set to true)
endless false Display all the slides next to each other regardless of their width
cuts "right" ("endless" must be true) Cuts off the slides on the right side by default. In a case where you want the cut-off of slides to show on the left set this value to "left"
gap 10 ("endless" parameter must be true) The gap between each of the slides in an endless presentation
adaptiveHeight false If set to true the slider will increase and decrease height based on the slide's height. False will base a fixed height on the first slide's height presentation
loop true ("endless" parameter must be true) This gives the illusion that an endless slider appears as if it goes forever. If set to false the slider will appear to "rewind" to the beginning.
extras 3 ("endless" and "loop" parameters must be true) This adjusts the number of slides slither appends to the end to give the illusion of infinite
overflowHiddenPadding {top:0, left:0, right:0, bottom:0} If you have a dropshadow or something absolutely positioned relative that "hangs over" the spacing of your slide contents you may need to apply some padding.
touch true Enables swipe gestures to navigate slides
preserveGrid fase When multiple slides are shown at a time and you get to the last one where there is an awkward number should we preserve the grid to keep the space where slides would have been?

Events

Event Payload Description
changed current slide index Whenever the active index changes the event is emitted

Methods

Method Parameters Description
reload None Reloads and rebuilds the slider. Usefull when you have a slider with dynamic slides

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>
  
  <div>Slide 1div>
  <div>Slide 2div>
  <div>Slide 3div>

  
  <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 1div>
  <div>Slide 2div>
  <div>Slide 4div>
  <div>Slide 5div>
  <div>Slide 6div>
  <div>Slide 7div>
  <div>Slide 8div>
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

Issues
  • Reset secondsOnSlide when changed event occurs

    Reset secondsOnSlide when changed event occurs

    Hi, great plugin. Thank you.

    I have noticed that the autoplay option does not adapt to the 'changed' event. For example, if I set secondsOnSlide to 10 seconds, and then click the next slide arrow after 9 seconds, 1 second later the autoplay option will trigger and change the slide again.

    It would be better if the secondsOnSlide timer is reset when the changed event occurs. This way, each slide will be on screen for the full 10 seconds.

    opened by corbinchild 2
  • chore(deps-dev): bump @vue/cli-service from 4.5.11 to 4.5.12

    chore(deps-dev): bump @vue/cli-service from 4.5.11 to 4.5.12

    Bumps @vue/cli-service from 4.5.11 to 4.5.12.

    Release notes

    Sourced from @​vue/cli-service's releases.

    v4.5.12

    • bump vue-codemod to work around an NPM hoisting bug
    • bump minimum required JSX preset / plugin versions, fixes vuejs/jsx#183
    • bump default typescript version to 4.1 and prettier version to 2.x for new projects, fixes #6299
    Changelog

    Sourced from @​vue/cli-service's changelog.

    5.0.0-alpha.7 (2021-03-11)

    :bug: Bug Fix

    • @vue/cli-service
      • #6343 fix: use cssnano v5.0.0-rc.1, work around a npm 6 hoisting bug (@​sodatea)

    Committers: 1

    5.0.0-alpha.6 (2021-03-10)

    :rocket: New Features

    • @vue/cli-plugin-unit-jest
    • @vue/cli-service
      • #6332 feat!: upgrade to css-loader 5; remove css.requireModuleExtension & css.modules options (@​sodatea)

    :boom: Breaking Changes

    • @vue/cli-plugin-unit-jest
    • @vue/cli-service
      • #6332 feat!: upgrade to css-loader 5; remove css.requireModuleExtension & css.modules options (@​sodatea)

    :bug: Bug Fix

    Committers: 2

    5.0.0-alpha.5 (2021-02-23)

    :rocket: New Features

    • @vue/cli-plugin-webpack-4, @vue/cli
      • #6307 feat(GeneratorAPI): forceOverwrite option for extendPackage (@​sodatea)
    • @vue/cli-plugin-webpack-4, @vue/cli-service
      • #6301 feat!: use the latest versions of css preprocessor loaders by default (@​sodatea)
    • @vue/cli-plugin-e2e-webdriverio, @vue/cli-plugin-typescript

    :boom: Breaking Changes

    • @vue/cli-plugin-webpack-4, @vue/cli-service
      • #6301 feat!: use the latest versions of css preprocessor loaders by default (@​sodatea)
    • @vue/cli-plugin-e2e-webdriverio, @vue/cli-plugin-typescript

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 1
  • chore(deps-dev): bump @vue/cli-plugin-babel from 4.5.11 to 4.5.12

    chore(deps-dev): bump @vue/cli-plugin-babel from 4.5.11 to 4.5.12

    Bumps @vue/cli-plugin-babel from 4.5.11 to 4.5.12.

    Release notes

    Sourced from @​vue/cli-plugin-babel's releases.

    v4.5.12

    • bump vue-codemod to work around an NPM hoisting bug
    • bump minimum required JSX preset / plugin versions, fixes vuejs/jsx#183
    • bump default typescript version to 4.1 and prettier version to 2.x for new projects, fixes #6299
    Changelog

    Sourced from @​vue/cli-plugin-babel's changelog.

    5.0.0-alpha.7 (2021-03-11)

    :bug: Bug Fix

    • @vue/cli-service
      • #6343 fix: use cssnano v5.0.0-rc.1, work around a npm 6 hoisting bug (@​sodatea)

    Committers: 1

    5.0.0-alpha.6 (2021-03-10)

    :rocket: New Features

    • @vue/cli-plugin-unit-jest
    • @vue/cli-service
      • #6332 feat!: upgrade to css-loader 5; remove css.requireModuleExtension & css.modules options (@​sodatea)

    :boom: Breaking Changes

    • @vue/cli-plugin-unit-jest
    • @vue/cli-service
      • #6332 feat!: upgrade to css-loader 5; remove css.requireModuleExtension & css.modules options (@​sodatea)

    :bug: Bug Fix

    Committers: 2

    5.0.0-alpha.5 (2021-02-23)

    :rocket: New Features

    • @vue/cli-plugin-webpack-4, @vue/cli
      • #6307 feat(GeneratorAPI): forceOverwrite option for extendPackage (@​sodatea)
    • @vue/cli-plugin-webpack-4, @vue/cli-service
      • #6301 feat!: use the latest versions of css preprocessor loaders by default (@​sodatea)
    • @vue/cli-plugin-e2e-webdriverio, @vue/cli-plugin-typescript

    :boom: Breaking Changes

    • @vue/cli-plugin-webpack-4, @vue/cli-service
      • #6301 feat!: use the latest versions of css preprocessor loaders by default (@​sodatea)
    • @vue/cli-plugin-e2e-webdriverio, @vue/cli-plugin-typescript

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 1
  • chore(deps-dev): bump webpack from 5.23.0 to 5.26.3

    chore(deps-dev): bump webpack from 5.23.0 to 5.26.3

    Bumps webpack from 5.23.0 to 5.26.3.

    Release notes

    Sourced from webpack's releases.

    v5.26.2

    Bugfixes

    • fix problem with new line after comment
    • fix assign libraries with runtime chunk

    v5.26.1

    Bugfixes

    • avoid using strict mode runtime for assign libraries to allow assigning not existing variables
    • avoid collision with Set.addAll polyfill
    • allow filenames starting with ../ when generation the undo path for non-web targets

    v5.26.0

    Features

    • handle cache version automatically for DefinePlugin
      • Values no longer need to be defined as build dependencies
    • add more options for DefinePlugin.runtimeValue (file/context/missing/buildDependencies, version)

    Bugfixes

    • fix a memory leak which happens in watch mode with caching when modules are removed from the compilation
    • fix usage of some arrow functions when es5 target is selected
    • chunk loading in workers now uses publicPath instead of relative paths
      • fixes a problem when worker file is in a child directory

    v5.25.1

    Bugfixes

    • fix startup logic when non-js chunks are in the entrypoint
    • remove type: "module" for Workers when generating classic scripts

    v5.25.0

    Features

    • Refactor the startup logic to improve library support
    • add __webpack_runtime_id__ to access the current runtime id
    • improve error handling for HMR
      • add second argument to self accept error handler to pass new module and module id
      • add error handler argument to dependency accept, passing error and module ids
    • add output.strictModuleErrorHandling to opt into stricter evaluation error handling semantics according to ESM spec
      • used by default when HMR is enabled
    • when ignoring a module used by new URL() this will result in an url to a empty file ("data:,")
    • add module.generator.asset.emit option to disable creating assets from asset modules (e. g. for SSR)

    Bugfixes

    • fix problem when library options apply to a non-runtime chunk
    • fix crash in splitChunks.maxSize where negative indicies are accessed

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 1
  • chore(deps-dev): bump webpack from 5.23.0 to 5.26.2

    chore(deps-dev): bump webpack from 5.23.0 to 5.26.2

    Bumps webpack from 5.23.0 to 5.26.2.

    Release notes

    Sourced from webpack's releases.

    v5.26.2

    Bugfixes

    • fix problem with new line after comment
    • fix assign libraries with runtime chunk

    v5.26.1

    Bugfixes

    • avoid using strict mode runtime for assign libraries to allow assigning not existing variables
    • avoid collision with Set.addAll polyfill
    • allow filenames starting with ../ when generation the undo path for non-web targets

    v5.26.0

    Features

    • handle cache version automatically for DefinePlugin
      • Values no longer need to be defined as build dependencies
    • add more options for DefinePlugin.runtimeValue (file/context/missing/buildDependencies, version)

    Bugfixes

    • fix a memory leak which happens in watch mode with caching when modules are removed from the compilation
    • fix usage of some arrow functions when es5 target is selected
    • chunk loading in workers now uses publicPath instead of relative paths
      • fixes a problem when worker file is in a child directory

    v5.25.1

    Bugfixes

    • fix startup logic when non-js chunks are in the entrypoint
    • remove type: "module" for Workers when generating classic scripts

    v5.25.0

    Features

    • Refactor the startup logic to improve library support
    • add __webpack_runtime_id__ to access the current runtime id
    • improve error handling for HMR
      • add second argument to self accept error handler to pass new module and module id
      • add error handler argument to dependency accept, passing error and module ids
    • add output.strictModuleErrorHandling to opt into stricter evaluation error handling semantics according to ESM spec
      • used by default when HMR is enabled
    • when ignoring a module used by new URL() this will result in an url to a empty file ("data:,")
    • add module.generator.asset.emit option to disable creating assets from asset modules (e. g. for SSR)

    Bugfixes

    • fix problem when library options apply to a non-runtime chunk
    • fix crash in splitChunks.maxSize where negative indicies are accessed

    ... (truncated)

    Commits
    • c67a73a 5.26.2
    • fccc13a Merge pull request #12907 from webpack/bugfix/assign-library-runtime-chunk
    • c6b8d24 Merge pull request #12909 from alialamine/fix-commented-code
    • a93eb10 fix problem with strict mode for assigning libraries with separate runtime chunk
    • 744aa27 add test case
    • 8dcaade Fix #12908
    • ee09a96 5.26.1
    • 982345e Merge pull request #12905 from webpack/bugfix/undo-dir-outside
    • 7dc945f allow to place runtime outside of the output path
    • 2abcede Merge pull request #12852 from chenxsan/test/test-library-type-assign
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 1
  • fix(deps): bump vue2-touch-events from 3.2.0 to 3.2.1

    fix(deps): bump vue2-touch-events from 3.2.0 to 3.2.1

    Bumps vue2-touch-events from 3.2.0 to 3.2.1.

    Release notes

    Sourced from vue2-touch-events's releases.

    v3.2.1

    • Add new namespace parameter to solve conflict with vuetify.js
    • Update README
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 1
  • chore(deps-dev): bump webpack from 5.23.0 to 5.26.0

    chore(deps-dev): bump webpack from 5.23.0 to 5.26.0

    Bumps webpack from 5.23.0 to 5.26.0.

    Release notes

    Sourced from webpack's releases.

    v5.26.0

    Features

    • handle cache version automatically for DefinePlugin
      • Values no longer need to be defined as build dependencies
    • add more options for DefinePlugin.runtimeValue (file/context/missing/buildDependencies, version)

    Bugfixes

    • fix a memory leak which happens in watch mode with caching when modules are removed from the compilation
    • fix usage of some arrow functions when es5 target is selected
    • chunk loading in workers now uses publicPath instead of relative paths
      • fixes a problem when worker file is in a child directory

    v5.25.1

    Bugfixes

    • fix startup logic when non-js chunks are in the entrypoint
    • remove type: "module" for Workers when generating classic scripts

    v5.25.0

    Features

    • Refactor the startup logic to improve library support
    • add __webpack_runtime_id__ to access the current runtime id
    • improve error handling for HMR
      • add second argument to self accept error handler to pass new module and module id
      • add error handler argument to dependency accept, passing error and module ids
    • add output.strictModuleErrorHandling to opt into stricter evaluation error handling semantics according to ESM spec
      • used by default when HMR is enabled
    • when ignoring a module used by new URL() this will result in an url to a empty file ("data:,")
    • add module.generator.asset.emit option to disable creating assets from asset modules (e. g. for SSR)

    Bugfixes

    • fix problem when library options apply to a non-runtime chunk
    • fix crash in splitChunks.maxSize where negative indicies are accessed
    • fix sub-optimal splitting of splitChunks.maxSize in some cases when multiple size types are involved
    • fix a memory leak in AssetGenerator
    • fix usage of runtime globals in SharedPlugin to support HMR updates

    Deprecations

    • deprecate output.strictModuleExceptionHandling (this is the CommonJS way of handling errors, and the name is weird)

    v5.24.4

    Bugfixes

    • fix overridding built-in externals via externals
    • fix handling UNC paths as windows paths

    ... (truncated)

    Commits
    • 1def19e 5.26.0
    • 99ab8bc Merge pull request #12610 from anshumanv/12577
    • 53e6f98 Merge pull request #12887 from webpack/issue-12885
    • 5af7e54 Merge pull request #12896 from webpack/feature/define-cache-version
    • eb63cb7 fix: prefix public path in importScripts
    • 7f4ce2c add expressionFunction helper to choose shortest variant when return value is...
    • 610b8af Merge pull request #12894 from webpack/bugfix/memory-leak
    • 103a514 DefinePlugin takes care of module invalidation when values have changed
    • 448ca3d fix: code
    • 139324c test: update snapshots
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 1
  • chore(deps-dev): bump webpack from 5.23.0 to 5.25.1

    chore(deps-dev): bump webpack from 5.23.0 to 5.25.1

    Bumps webpack from 5.23.0 to 5.25.1.

    Release notes

    Sourced from webpack's releases.

    v5.25.1

    Bugfixes

    • fix startup logic when non-js chunks are in the entrypoint
    • remove type: "module" for Workers when generating classic scripts

    v5.25.0

    Features

    • Refactor the startup logic to improve library support
    • add __webpack_runtime_id__ to access the current runtime id
    • improve error handling for HMR
      • add second argument to self accept error handler to pass new module and module id
      • add error handler argument to dependency accept, passing error and module ids
    • add output.strictModuleErrorHandling to opt into stricter evaluation error handling semantics according to ESM spec
      • used by default when HMR is enabled
    • when ignoring a module used by new URL() this will result in an url to a empty file ("data:,")
    • add module.generator.asset.emit option to disable creating assets from asset modules (e. g. for SSR)

    Bugfixes

    • fix problem when library options apply to a non-runtime chunk
    • fix crash in splitChunks.maxSize where negative indicies are accessed
    • fix sub-optimal splitting of splitChunks.maxSize in some cases when multiple size types are involved
    • fix a memory leak in AssetGenerator
    • fix usage of runtime globals in SharedPlugin to support HMR updates

    Deprecations

    • deprecate output.strictModuleExceptionHandling (this is the CommonJS way of handling errors, and the name is weird)

    v5.24.4

    Bugfixes

    • fix overridding built-in externals via externals
    • fix handling UNC paths as windows paths
    • Improve error when passing an empty array as library name
    • avoid adding the package.json from compilation context as build dependency
    • fix expansion of "..." in array configuration options when it's not at the start

    v5.24.3

    Bugfixes

    • fix contenthash when a file is emitted twice with different filenames but that same contenthash

    v5.24.2

    Bugfixes

    • fix invalid syntax generated for destructuring with default values
    • fix some incorrect properties accesses in watch

    ... (truncated)

    Commits
    • 58dfda2 5.25.1
    • 3f2a269 Merge pull request #12891 from webpack/bugfix/non-js-entry
    • 69218d4 fix problem with startup of non-js initial chunks
    • e643b85 Merge pull request #12750 from RReverser/remove-worker-type-module
    • 61cc65c improve parsing to handle non-literal options
    • e839494 Disallow type:module + importScripts in tests
    • ea2cdeb Remove type: 'module from new Worker exprs
    • be352e8 5.25.0
    • ab74839 Merge pull request #12871 from webpack/feature/generate-asset
    • bcf3cb2 Merge pull request #12872 from webpack/bugfix/ignore-asset-modules
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 1
  • chore(deps-dev): bump webpack from 5.23.0 to 5.24.4

    chore(deps-dev): bump webpack from 5.23.0 to 5.24.4

    Bumps webpack from 5.23.0 to 5.24.4.

    Release notes

    Sourced from webpack's releases.

    v5.24.4

    Bugfixes

    • fix overridding built-in externals via externals
    • fix handling UNC paths as windows paths
    • Improve error when passing an empty array as library name
    • avoid adding the package.json from compilation context as build dependency
    • fix expansion of "..." in array configuration options when it's not at the start

    v5.24.3

    Bugfixes

    • fix contenthash when a file is emitted twice with different filenames but that same contenthash

    v5.24.2

    Bugfixes

    • fix invalid syntax generated for destructuring with default values
    • fix some incorrect properties accesses in watch
      • modifiedFiles and removedFiles were undefined
    • fix some edge cases with MultiCompiler

    v5.24.1

    Performance

    • improve performance of finding modules to concatenate
    • improve performance of getting incoming modules from connections
    • make sure that all serialized modules restore correctly
    • avoid storing ConcatenatedModule, since that's not needed

    Developer Experience

    • fix typo in deprecation message

    v5.24.0

    Bugfixes

    • fix name conflict when using destructing with default arguments in concatenated modules
    • fix tracking of reexports in concatenated modules when using multiple export * that point to the same export
    • debug logging is now included even if logging is not
    • fix name of ModuleConcatenationPlugin logger
    • fix experiments.lazyCompilation: true. It now has an effect.

    Developer Experience

    • expose Watching type

    Contribution

    • fix husky setup

    ... (truncated)

    Commits
    • ef5e681 5.24.4
    • c18b3c5 Merge pull request #12832 from webpack/bugfix/array-default-fallback
    • 9e7a293 Merge pull request #12822 from webpack/bugfix/avoid-package-json-build-depend...
    • e63e733 fix array expansion when using "..."
    • 5ff9a14 add test case
    • 73af688 Merge pull request #12828 from chenxsan/bugfix/fix-library-schema
    • ddbffca Merge pull request #12762 from webpack/dependabot/npm_and_yarn/eslint-plugin-...
    • 0f330d3 Merge pull request #12829 from webpack/dependabot/npm_and_yarn/eslint-plugin-...
    • 1fe2e41 Merge pull request #12805 from webpack/dependabot/npm_and_yarn/pug-3.0.1
    • dace9fb Merge pull request #12827 from dmattia/master
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 1
  • chore(deps-dev): bump webpack from 5.23.0 to 5.24.3

    chore(deps-dev): bump webpack from 5.23.0 to 5.24.3

    Bumps webpack from 5.23.0 to 5.24.3.

    Release notes

    Sourced from webpack's releases.

    v5.24.3

    Bugfixes

    • fix contenthash when a file is emitted twice with different filenames but that same contenthash

    v5.24.2

    Bugfixes

    • fix invalid syntax generated for destructuring with default values
    • fix some incorrect properties accesses in watch
      • modifiedFiles and removedFiles were undefined
    • fix some edge cases with MultiCompiler

    v5.24.1

    Performance

    • improve performance of finding modules to concatenate
    • improve performance of getting incoming modules from connections
    • make sure that all serialized modules restore correctly
    • avoid storing ConcatenatedModule, since that's not needed

    Developer Experience

    • fix typo in deprecation message

    v5.24.0

    Bugfixes

    • fix name conflict when using destructing with default arguments in concatenated modules
    • fix tracking of reexports in concatenated modules when using multiple export * that point to the same export
    • debug logging is now included even if logging is not
    • fix name of ModuleConcatenationPlugin logger
    • fix experiments.lazyCompilation: true. It now has an effect.

    Developer Experience

    • expose Watching type

    Contribution

    • fix husky setup

    Performance

    • improve performance of module concatenation
    Commits
    • d044c85 5.24.3
    • a3d0c06 Merge pull request #12800 from webpack/dependabot/npm_and_yarn/css-loader-5.1.1
    • 1e235f6 chore(deps-dev): bump css-loader from 5.0.2 to 5.1.1
    • 4cbe4c7 Merge pull request #12794 from webpack/dependabot/npm_and_yarn/core-js-3.9.1
    • 9c63f11 Merge pull request #12799 from chenxsan/feature/update-husky
    • 857783b use prepare to run husky install
    • 97a6269 Merge pull request #12797 from webpack/bugfix/duplicate-assets-hash
    • 3ff304f upgrade husky
    • 923ac94 add test case for assets that become identical after optimization
    • 70376ad fix problem where emitting an asset twice affects the hash
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 1
  • chore(deps-dev): bump sass-loader from 11.1.1 to 12.1.0

    chore(deps-dev): bump sass-loader from 11.1.1 to 12.1.0

    Bumps sass-loader from 11.1.1 to 12.1.0.

    Release notes

    Sourced from sass-loader's releases.

    v12.1.0

    12.1.0 (2021-06-10)

    Features

    • allow String value for the implementation option (382a3ca)

    v12.0.0

    12.0.0 (2021-06-01)

    ⚠ BREAKING CHANGES

    • minimum supported Node.js version is 12.13.0

    Bug Fixes

    • crash in custom importers with worker threads (#958) (67aa139)
    • resolving _index.import.scss/index.import.scss in packages (#906) (6641a16)
    Changelog

    Sourced from sass-loader's changelog.

    12.1.0 (2021-06-10)

    Features

    • allow String value for the implementation option (382a3ca)

    12.0.0 (2021-06-01)

    ⚠ BREAKING CHANGES

    • minimum supported Node.js version is 12.13.0

    Bug Fixes

    • crash in custom importers with worker threads (#958) (67aa139)
    • resolving _index.import.scss/index.import.scss in packages (#906) (6641a16)
    Commits
    • 7d00b10 chore(release): 12.1.0
    • 382a3ca feat: allow String value for the implementation option
    • 68b93f1 chore: devdependencies updated (#966)
    • 7ca5450 chore: fix typo (#964)
    • 6ceaa0f chore(release): 12.0.0
    • e013c4f chore: fix engines (#960)
    • 530765b chore!: minimum supported Node.js version is 12.13.0
    • a248836 refactor: logic of sass resolution
    • 6641a16 fix: resolving _index.import.scss/index.import.scss in packages (#906)
    • 67aa139 fix: crash in custom importers with worker threads (#958)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • chore(deps-dev): bump core-js from 3.13.1 to 3.14.0

    chore(deps-dev): bump core-js from 3.13.1 to 3.14.0

    Bumps core-js from 3.13.1 to 3.14.0.

    Changelog

    Sourced from core-js's changelog.

    3.14.0 - 2021.06.05
    • Added polyfill of stable sort in { Array, %TypedArray% }.prototype.sort, #769, #941
    • Fixed Safari 14.0- %TypedArray%.prototype.sort validation of arguments bug
    • .at marked as supported from V8 9.2
    Commits
    • e386f3d 3.14.0
    • fb75c0a some improvements
    • 586d578 make %TypedArray%.prototype.sort stricter
    • 07ca565 update compat data tests
    • e7e81d8 Safari 10.0 - 14.0 %TypedArray%.prototype.sort accept incorrect arguments
    • 8b56b38 improve polyfill of stable sort
    • ae0cd69 add polyfill of stable sort
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • fix(deps): bump ws from 6.2.1 to 6.2.2

    fix(deps): bump ws from 6.2.1 to 6.2.2

    Bumps ws from 6.2.1 to 6.2.2.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.
    dependencies 
    opened by dependabot[bot] 0
  • chore(deps-dev): bump sass from 1.34.0 to 1.34.1

    chore(deps-dev): bump sass from 1.34.0 to 1.34.1

    Bumps sass from 1.34.0 to 1.34.1.

    Release notes

    Sourced from sass's releases.

    Dart Sass 1.34.1

    To install Sass 1.34.1, download one of the packages below and add it to your PATH, or see the Sass website for full installation instructions.

    Changes

    • Fix a bug where --update would always compile any file that depends on a built-in module.

    • Fix the URL for the @-moz-document deprecation message.

    • Fix a bug with @for loops nested inside property declarations.

    See the full changelog for changes in earlier releases.

    Changelog

    Sourced from sass's changelog.

    1.34.1

    • Fix a bug where --update would always compile any file that depends on a built-in module.

    • Fix the URL for the @-moz-document deprecation message.

    • Fix a bug with @for loops nested inside property declarations.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  •  Vue 3 support?

    Vue 3 support?

    Can you show me how to use this slider in Vue 3?

    enhancement 
    opened by kentforth 1
Releases(1.2.0)
  • 1.2.0(Oct 2, 2019)

    Includes a few minor bug fixes and three major features:

    • Better organization of slide groups (pages created by "numberOfSlides"
    • Slide animation (new default) along with fade as an option using "transisition" option
    • Auto-height augmentation when changes detected in slide content.
    Source code(tar.gz)
    Source code(zip)
  • 1.0.0(Sep 25, 2019)

    Welcome to slither slider. We were tired of wrestling with sliders that couldn't handle things we threw at it. Either they did everything we wanted but acted weird when we wanted to lazy load or snagged on VueJS as things got dynamic. Take a look and see what you think. We have no problem making this more action packed - just submit an issue and we'll discuss.

    For now take a look at the README for features and configuration.

    Source code(tar.gz)
    Source code(zip)
Owner
Gary Williams
Gary Williams
Simple Vue JS slider for Vue JS that pretty much takes what you throw at it.

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

Gary Williams 21 Jun 2, 2021
Simple Vue JS slider for Vue JS that pretty much takes what you throw at it.

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

Gary Williams 23 Jun 6, 2021
Range slider with histogram for Vue.js

Range slider with histogram for Vue ?? Quick Start If you are a try and learn developer, you can start trying the vue-histogram-slider now using codes

Oguzhan Inan 84 Jun 5, 2021
Image comparison slider. Compare images before and after. Supports React, Vue, Angular.

Image comparison slider. Compare images before and after. Supports React, Vue, Angular.

Dmitry Snisarenko 65 Jun 13, 2021
🌡 A highly customized slider component

?? A highly customized slider component English | 简体中文 ?? Vue3.x This is still in beta and may contain unexpected bugs, please use with caution. insta

NightCat 2k Jun 4, 2021
Circle slider component for Vue.js

vue-circle-slider Circle slider component for Vue.js Table of contents Installation Usage Demo TODO intentions Installation npm install --save vue-cir

Devstark 205 May 27, 2021
🎢 A Simple Vue Slider Bar Component.

?? Vue Slide Bar A Simple Vue Slider Bar Component. Docs Document & Demo Page Install npm install vue-slide-bar --save or yarn add vue-slide-bar Usage

Pongsatorn 130 Apr 21, 2021
noUiSlider based Component for Vue 2

veeno veeno is a range slider component for vue based off of noUiSlider It supports all noUiSlider features. Installation You can install the package

Nasir Khan 24 Apr 7, 2021
Vue js add-on to slide text.

Textra A Vue.js add-on to slide your text. demo Installing npm i -D vue-textra Then inside your project, start using it: import Vue from 'vue' import

Hosein 28 May 18, 2021
A rotary knob control for Vue.js

vue-knob-control A rotary knob control for Vue.js Install npm install vue-knob-control -S Usage import Vue from 'vue' import KnobControl from 'vue-kno

Craig 48 Mar 29, 2021
A touch ready and responsive slideshow / carousel for Vue & Vue 3.

A touch ready and responsive slideshow / carousel for Vue & Vue 3.

Antoni 359 Jun 12, 2021
PPTist 一个基于 Vue3.x + TypeScript 的在线演示文稿应用

基于 Vue3.x + TypeScript 的在线演示文稿应用。实现PPT幻灯片的在线编辑、演示。

LLzzZZ 760 Jun 3, 2021
为开发者打造的演示文稿工具

为开发者打造的演示文稿工具 ??‍?? ??‍?? ??‍?? 简体中文 | English 目前 Slidev 中文文档正在翻译校对过程中 (WIP) 欢迎参与贡献,翻译任务认领说明 Slidev 中文文档 ?? Markdown 支持 —— 使用你最喜欢的编辑器和工作流编写 Markdown 文

Slidev 29 Jun 10, 2021