Sets or gets the animationDuration property. Specifies the duration of the animation which starts when the current page is changed.

<template>
  <JqxScrollView ref="myScrollView"
    :width="600" :height="450" :animationDuration="3000">
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
  </JqxScrollView>
</template>
 
<script>
  import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue';
 
  export default {
    components: {
      JqxScrollView
    }
  }
</script>

Sets or gets whether the bounce effect is enabled when pages are changed.

<template>
  <JqxScrollView ref="myScrollView"
    :width="600" :height="450" :bounceEnabled="false">
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
  </JqxScrollView>
</template>
 
<script>
  import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue';
 
  export default {
    components: {
      JqxScrollView
    }
  }
</script>

Sets or gets the jqxScrollView's buttonsOffset property. This property sets the offset from the default location of the navigation buttons.

<template>
  <JqxScrollView ref="myScrollView"
    :width="600" :height="450" :buttonsOffset=" [100, 0] ">
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
  </JqxScrollView>
</template>
 
<script>
  import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue';
 
  export default {
    components: {
      JqxScrollView
    }
  }
</script>

Sets or gets the jqxScrollView's currentPage property. The currentPage specifies the displayed element.

<template>
  <JqxScrollView ref="myScrollView"
    :width="600" :height="450" :currentPage="1">
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
  </JqxScrollView>
</template>
 
<script>
  import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue';
 
  export default {
    components: {
      JqxScrollView
    }
  }
</script>

Sets or gets the jqxScrollView's disabled property.

<template>
  <JqxScrollView ref="myScrollView"
    :width="600" :height="450" :disabled="true">
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
  </JqxScrollView>
</template>
 
<script>
  import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue';
 
  export default {
    components: {
      JqxScrollView
    }
  }
</script>

Sets or gets the jqxScrollView's height.

<template>
  <JqxScrollView ref="myScrollView"
    :width="600" :height="450">
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
  </JqxScrollView>
</template>
 
<script>
  import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue';
 
  export default {
    components: {
      JqxScrollView
    }
  }
</script>

Sets or gets the jqxScrollView's moveThreshold property. The moveThreshold property specifies how much the user should drag the current element to navigate to next/previous element. Values should be set from 0.1 to 1. 0.5 means 50% of the element's width.

<template>
  <JqxScrollView ref="myScrollView"
    :width="600" :height="450" :moveThreshold="1">
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
  </JqxScrollView>
</template>
 
<script>
  import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue';
 
  export default {
    components: {
      JqxScrollView
    }
  }
</script>

Sets or gets whether the navigation buttons are visible.

<template>
  <JqxScrollView ref="myScrollView"
    :width="600" :height="450" :showButtons="false">
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
  </JqxScrollView>
</template>
 
<script>
  import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue';
 
  export default {
    components: {
      JqxScrollView
    }
  }
</script>

Indicates whether the slideShow mode is enabled. In this mode, pages are changed automatically in a time interval.

<template>
  <JqxScrollView ref="myScrollView"
    :width="600" :height="450" :slideShow="true">
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
  </JqxScrollView>
</template>
 
<script>
  import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue';
 
  export default {
    components: {
      JqxScrollView
    }
  }
</script>

Sets or gets the duration in milliseconds of a time interval. The current page is changed when the time interval is elapsed.

<template>
  <JqxScrollView ref="myScrollView"
    :width="600" :height="450" :slideShow="true" :slideDuration="1000">
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
  </JqxScrollView>
</template>
 
<script>
  import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue';
 
  export default {
    components: {
      JqxScrollView
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxScrollView ref="myScrollView"
    :width="600" :height="450" :theme="'material'">
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
  </JqxScrollView>
</template>
 
<script>
  import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue';
 
  export default {
    components: {
      JqxScrollView
    }
  }
</script>

Sets or gets the jqxScrollView's width.

<template>
  <JqxScrollView ref="myScrollView"
    :width="600" :height="450">
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
  </JqxScrollView>
</template>
 
<script>
  import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue';
 
  export default {
    components: {
      JqxScrollView
    }
  }
</script>

This event is triggered when the current page is changed.

Code examples

Bind to the pageChanged event of jqxScrollView.

<template>
  <JqxScrollView ref="myScrollView" @pageChanged="onPageChanged($event)"
    :width="600" :height="450">
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
  </JqxScrollView>
</template>
 
<script>
  import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue';
 
  export default {
    components: {
      JqxScrollView
    },
    methods: {
      onPageChanged: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Navigates to the previous page.

<template>
  <JqxScrollView ref="myScrollView"
    :width="600" :height="450">
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
  </JqxScrollView>
</template>
 
<script>
  import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue';
 
  export default {
    components: {
      JqxScrollView
    },
    mounted: function () {
      this.$refs.myScrollView.currentPage = 1;
      this.$refs.myScrollView.back();
    }
  }
</script>

Navigates to a page.

<template>
  <JqxScrollView ref="myScrollView"
    :width="600" :height="450">
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
  </JqxScrollView>
</template>
 
<script>
  import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue';
 
  export default {
    components: {
      JqxScrollView
    },
    mounted: function () {
      this.$refs.myScrollView.changePage(1);
    }
  }
</script>

Navigates to the next page.

<template>
  <JqxScrollView ref="myScrollView"
    :width="600" :height="450">
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
  </JqxScrollView>
</template>
 
<script>
  import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue';
 
  export default {
    components: {
      JqxScrollView
    },
    mounted: function () {
      this.$refs.myScrollView.forward();
    }
  }
</script>

Refreshes the widget.

<template>
  <JqxScrollView ref="myScrollView"
    :width="600" :height="450">
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
    <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
  </JqxScrollView>
</template>
 
<script>
  import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue';
 
  export default {
    components: {
      JqxScrollView
    },
    mounted: function () {
      this.$refs.myScrollView.refresh();
    }
  }
</script>