A carousel component No jQuery written in Vue.js

by Vue.js Examples

tiny-slider 2.0 for Vue

A carousel component created by ganlanyuan, written in Vue.js. No jQuery. Works in IE8+.

Vanilla javascript slider for all purposes created by ganlanyuan in Vue.

Wrapper for Tiny slider for all purposes by ganlanyuan in Vue.

Firefox 12+, Chrome 15+, Safari 4+, Opera 12.1+, IE8+

View demo Download Source

Install

npm install vue-tiny-slider

Use

import VueTinySlider from 'vue-tiny-slider';

new Vue({
  components: {
    'tiny-slider': VueTinySlider
  }
})

<tiny-slider :mouse-drag="true" :loop="false" items="2" gutter="20">
  <div>Slider item #1</div>
  <div>Slider item #2</div>
  <div>Slider item #3</div>
  <div>Slider item #4</div>
  <div>Slider item #5</div>
  <div>Slider item #6</div>
</tiny-slider>

Styling

SCSS

@import 'tiny-slider/src/tiny-slider';

CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.3.5/tiny-slider.css">

Options

items
mode
gutter
edge-padding
fixed-width
slide-by
controls
controls-text
controls-container
nav
nav-container
arrow-keys
speed
autoplay
autoplay-timeout
autoplay-direction
autoplay-text
autoplay-hover-pause
autoplay-button
autoplay-button-output
autoplay-reset-on-visibility
animate-in
animate-out
animate-normal
animate-delay
loop
rewind
auto-height
responsive
lazyload
touch
mouse-drag
nested
freezable
disable
on-init

For more detailed information about the options, see the Tiny-slider documentation (Options).

Methods

getInfo
goTo
destroy

For more detailed information about the methods, see the Tiny-slider documentation (Methods).

Todo

  • Add demo link from a fiddle or something similar
  • Better handling of the responsive-settings
  • Add Custom Events
  • Add Methods

GitHub