Hi, I hope this is the right place to ask for help. I'm using vue-easy-slider in a Gridsome website and it works like a charm when running the site locally. With gridsome develop I can run the site on my local dev and the slider is fully functional.

I put the slider in it's own component btw. It looks like this:

<template>
  <section class="testimonials">
    <slider animation="normal" interval="8000">
      <slider-item v-for="edge in $static.testimonials.edges" :key="edge.node.id">
        <div class="testimonial" v-html="edge.node.content" />
        <div class="quote-by">{{edge.node.quote_by}}</div>
      </slider-item>
    </slider>
  </section>
</template>

<static-query>
query {
  testimonials: allTestimonial {
    edges {
      node {
        id
        title
        quote_by
        content
      }
    }
  }
}
</static-query>

<script>
import { Slider, SliderItem } from 'vue-easy-slider'

export default {
  name: 'TestimonialSlider',
  components: {
    Slider,
    SliderItem
  }
}
</script>

<style lang="scss">
all styles defined here...
</style>

When I want to deploy the website by running gridsome build the slider causes the following errors:

$ gridsome build
Gridsome v0.7.14

Initializing plugins...
Load sources - 0.11s
Create GraphQL schema - 0.12s
Create pages and templates - 0.06s
Generate temporary code - 0.03s
Bootstrap finish - 1.55s
Compile assets - 8.08s
Execute GraphQL (25 queries) - 0.06s
Write out page data (25 files) - 0.01s
Could not generate HTML for "/":
ReferenceError: document is not defined
    at addStyle (node_modules/vue-easy-slider/dist/vue-easy-slider.esm.js:715:0)
    at assets/js/vendors~page--src--pages--index-vue.1fbf38b4.js:703:12
    at a.__vue_inject_styles__ (node_modules/vue-easy-slider/dist/vue-easy-slider.esm.js:751:0)
    at a.hook (node_modules/vue-easy-slider/dist/vue-easy-slider.esm.js:661:0)
    at Ft (/PATH_TO_WEBSITE/node_modules/vue/dist/vue.runtime.common.prod.js:6:11191)
    at Ze (/PATH_TO_WEBSITE/node_modules/vue/dist/vue.runtime.common.prod.js:6:25133)
    at a.e._init (/PATH_TO_WEBSITE/node_modules/vue/dist/vue.runtime.common.prod.js:6:32564)
    at new a (/PATH_TO_WEBSITE/node_modules/vue/dist/vue.runtime.common.prod.js:6:30340)
    at Vi (/PATH_TO_WEBSITE/node_modules/vue-server-renderer/build.prod.js:1:66307)

Do you have any idea what might cause this problem? Or do you suppose it's a Gridsome error?

当应用存在多个路由页面时（轮播图属于其中一个路由页面），多个页面之间定时做自动路由切换
var currentPath = this.$router.currentRoute.path;
var routes = this.$router.options.routes;
let pageCount = routes.length;
//console.log(this.interval);
if(this.interval == pageCount){
//window.location.reload();
}
if(pageIndex >= routes.length) {
pageIndex = 0;
}
this.interval++;
this.$router.replace(routes[pageIndex++].path);
切换路由会出现首页的轮播图图片重叠的缺陷

template: ${ PROJECT_ROOT }/demo/index.html,
这个文件没有，
我想学习这个组件的源码，能不能把demo文件夹也上传上去

�在部分测试机用会报 a.ids.inculdes is not a function。
希望在打包时支持更多低版本浏览器。

There is no responsive feature can you add it ?

Depending on the browser, the default type can be submit which can cause ? to be added to the end of urls. Not a huge deal unless you are using hash-based routing which would essentially refresh your page.

Hello, how can I change the slider indicator icon's background-color when it's active or non-active? I already tried to override the slider-indicator-icon class but it's not working

It would be great for developers to be able to style and resize the slider buttons. In other words, it would be cool if developers have control over how to style the buttons.

If I copy the demo code to the project, I will report an error. The version I used is vue 2.0.+

if I hide slider with using v-if or v-else, the error occurs:

[Vue warn]: Error in nextTick: "TypeError: Cannot set property 'zIndex' of undefined"
TypeError: Cannot set property 'zIndex' of undefined
at VueComponent.handleSetTopItem (index.js?5150:1)
at VueComponent.boundFn [as handleSetTopItem] (vue.esm.js?0b33:164)
at VueComponent.eval (index.js?5150:1)
at Array.eval (vue.esm.js?0b33:655)
at nextTickHandler (vue.esm.js?0b33:602)
at

my codes are like these:

<slider v-if="sites.length<=0">
	<slider-item v-for="(slide, index) in guide.slides" :key="index">
		<div>
			<h3 class="font_violet">{{slide.title}}</h3>
			<div class="wrapper">
				<p class="icon"><img :src="slide.iconSrc"></p>
				<p class="link"><a :href="slide.url">quick menu</a></p>
			</div>
		</div>
	</slider-item>
</slider>

我用到了 路由 然后采用webpack打包 当我从轮播页面切换到 别的页面的时候 会根据定时器的时间间隙 在控制台重复 报错 报错信息如下：
index.js?6abc:1 Uncaught TypeError: Cannot read property 'length' of null
at eval (eval at (app.js:7042), :1:6138)

我猜是 当我切换路由时并没有 停止定时器的相关功能 请问怎么解决呀
我尝试用destroyed来销毁定时器 但获取不到需要销毁的 timer

<banner v-bind:height="336px"></banner>
这么给轮播图赋值，会报错
(Emitted` value instead of an instance of Error)
Error compiling template:

<div>
    <banner v-bind:height="336px"></banner>
     <h1>{{ msg }}</h1>
  </div>

• invalid expression: v-bind:height="336px"

刚了解vue，不太懂，望指教

In function next, you used funciton beforePrevious instead of beforeNext, it's wrong

Is there a way to enable auto resizing / height of the slider item?

Thanks for such a useful package, Please add a flag to pause auto play on hover.

This can be, and i think, should be delivered as plugin of vuejs.
This will allow easier integration through npm by just installing and importing. nothing to configure.

I can work on it, will need some config files update and minor component changes. Let me know.

Error:

vue.common.js?e881:2643 [Vue warn]: You are using the runtime-only build of Vue where the
template option is not available.
Either pre-compile the templates into render functions, or use the compiler-included build. 
(found in component <slider>)

Also seems like the entire Vue.js is included in the dist file which is probably not necessary

Is is possible to have diffrent interval (duration) for each slide? I tried to update 'interval' property after slide change, but that changes nothing.

it would be nice, to have the option of see multiple items for slide

I just installed the plugin and did the necessary config for plugins in Nuxt and got this 'document not defined' error on initial server load. Is there something i'm missing?

If I copy the demo code to the project, I will report an error. The version I used is vue 2.0.+

Hello @shhdgit and Thank you for this component.
I have tried the following

        <slider width="auto" height="400px" :interval="1000">
            <slider-item v-for="slide in slides">
                    <img :src="slide.image_path">
                    <p>{{slide.message}}</p>
            </slider-item>
        </slider>

But It only gives
image
As you can see in the image the data is fetched correctly but it is not being displayed properly,
I hard coded the width of the slide-content and the image is showed but if i hit the "next button" no other images are being displayed.

If the component wouldn’t be compiled i would try to debug it.

Please take a look at it.

Thank you very much.

官方给的demo可以复现改问题，当切换到其他页面并等待一段时间，再切回demo页的时候会出现一个延迟周期的白屏

This problem is triggered when clicking fast on the navigator arrow.

If I change the value of the linked model variable too fast, the second value of the slide index will be omitted. This could be due to the transition effect. The navigator will show a result while the slide will update only the first variable change.

<slider v-model="slideIndex">
...

CODE TO TEST/REPRODUCE THE BUG

    moveToIndex(index) {
      this.slideIndex = index // eg. index = 3
      var _this = this
      setTimeout(function(){
        _this.slideIndex = index + 1 // eg. index = 4 . This second change will be omitted
      }, 50);
    }
    // result will be slider pointing to index 3

HACK FIX

    moveToIndex(index) {
      this.slideIndex = index
      var _this = this
      setTimeout(function(){
        _this.slideIndex = index
        _this.$forceUpdate()
      }, 300);
    }

轮播计时器+页码标识，重复点当前所在的页码标识导致图片错位。

Hi,

would be good a live demo fiddle

Some common animations should be available right out of the box.

• Slide
• Fade
  etc

Below is my code

<script>
    import { Slider, SliderItem } from 'vue-easy-slider/src/index.js'
              export default {
  	name: 'News',
  	components: {
  		 'Slider': window[ 'vue-easy-slider' ].Slider,
  		'SliderItem': window[ 'vue-easy-slider' ].SliderItem
  	},
  	props: [
  		'news',
  	],
  	data() {
  		return {
  			News_list: [],
  			list: [],
  		}
  	},
  	methods: {
  		expandBottom(name) {
  			console.log('exapanding')
  		}
  	},
  	mounted() {
  		new Vue({
  			el: '#slider',
  			data() {
  				return {
  					list: [],
  				}
  			},
  			methods: {
  				test() {
  					console.log(1)
  				}
  			},
  			mounted() {
  				setTimeout(() => {
  					this.list = [
  						{
  							backgroundColor: '#eee',
  							width: '100%',
  							height: '100%'
  						},
  						{
  							backgroundColor: '#f44336',
  							width: '100%',
  							height: '100%'
  						},
  					]
  				}, 1000)
  			},
  		})
  	}
  }
</script>

First of all, thanks for this simple yet powerful tool, it is very useful and lightweight. I was wondering if there is a possibility to start the slider at a specific slide? Meaning, if my slides are static and always have specific indexes, would it be possible to start the slider sometimes at slide 1 and sometimes at slide 3 for example?

I'm in a scenario where I would need to know when a slide changes, the only click event does not cover my use case.

Would it be possible to emit these events:

• changeSlide
• nextSlide
• previousSlide

I'm willing to do a pull request, it shouldn't be too hard

Hi, It would be great if the slider could work with the touch swipe event, so that it is suitable for phones where navigation with the arrows is less comfortable and natural.

Have plan to support vue2 server rendering?

This is the message I get and I'm also new to Typescript but it appears that I need to have types for it to reference. I saw no such folder nor updates.

in [at-loader] ./ClientApp/components/home/homevue.ts:2:36
TS7016: Could not find a declaration file for module 'vue-easy-slider'. 'H:/Files/Projects/TunstallSoftwareCorpWebsite/TunstallSoftware/node_modules/vue-easy-slider/dist/index.js' implicitly has an 'any' type.
ERR

Hello,

I'm using this package to show images. I get the images from an API and check regularly if images are updated (added or deleted). When an image is added it add an extra slide, that works fine. But when a slide is removed, I will get an empty slide (the image is deleted).

Can you help me fix this?

This is the code that I'm using, where screenItems is data from the API

<slider 
  animation="fade" 
  height="900px" 
  :indicators="false" 
  :interval="10000" 
  :control-btn="false">
    
    <slider-item
      v-for="item in screenItems"
      :key="item.id">
        <img 
          style="width:100%;height:100%;"
          :src="item.value"
          class="narrowcasting-screen-item">
    </slider-item>

</slider>

Hope I'm clear, if you need more information let me know!

The props indicators are of type String, so when trying to set the Boolean value false it displays errors in the console because it waits for a String, even if it works.

Would not it be more interesting to use one 'props' for display and one for positioning?

There should be a way to call next and prev functions to handle keypress pragmatically.

On some pages, the slider shows the first element blank.
This happens if I'm clicking direct on the url or if I'm refreshing the page.
(The blank element is initially added to the other elements.)

attaching urls here - but may delete later
deleted

Clicking on the first control-button will flash

Is it possible to add a png logo over the sliders?

可参考我写的 vue-image-slider ，主要的功能就是在移动端支持触摸滑动切换，其他的功能后续慢慢加

Is there a way to disable slide events in some cases?
e.g.: Enable or disable sliding if a condition returns true or false

<slider class="quiz-background" animation="normal" :auto=false :indicators="false" @next="nextSlide($event.original)"
        @previous="previousSlide($event.original)">
  <slider-item v-for="q, i in quiz.questions" :key="i">
    <!-- content -->
  </slider-item>
</slider>

nextSlide(i) {
  if(foo) {
    // enable sliding to see next item
  } else {
    // disable/block sliding
  }
},
previousSlide(i) {
  if(foo) {
    // enable sliding to see next item
  } else {
    // disable/block sliding
  }
}