Properties

animationDuration int 30

Sets or gets the animationDuration property.

<script src="~/jqwidgets/jqxscrollview.js"></script>

@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>

@{
    ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
    .photo {
        width: 600px;
        height: 450px;
        background-color: #000;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<jqx-scroll-view >
    <div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div>
</jqx-scroll-view>
bounceEnabled bool true

Sets or gets the bounceEnabled property.

<script src="~/jqwidgets/jqxscrollview.js"></script>

@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>

@{
    ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
    .photo {
        width: 600px;
        height: 450px;
        background-color: #000;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<jqx-scroll-view >
    <div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div>
</jqx-scroll-view>
buttonsOffset List<string> [0, 0]

Sets or gets the buttonsOffset property.

<script src="~/jqwidgets/jqxscrollview.js"></script>

@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>

@{
    ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
    .photo {
        width: 600px;
        height: 450px;
        background-color: #000;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<jqx-scroll-view >
    <div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div>
</jqx-scroll-view>
currentPage int 0

Sets or gets the currentPage property.

<script src="~/jqwidgets/jqxscrollview.js"></script>

@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>

@{
    ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
    .photo {
        width: 600px;
        height: 450px;
        background-color: #000;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<jqx-scroll-view >
    <div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div>
</jqx-scroll-view>
disabled bool false

Sets or gets the disabled property.

<script src="~/jqwidgets/jqxscrollview.js"></script>

@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>

@{
    ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
    .photo {
        width: 600px;
        height: 450px;
        background-color: #000;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<jqx-scroll-view >
    <div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div>
</jqx-scroll-view>
height string 320

Sets or gets the height property.

<script src="~/jqwidgets/jqxscrollview.js"></script>

@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>

@{
    ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
    .photo {
        width: 600px;
        height: 450px;
        background-color: #000;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<jqx-scroll-view >
    <div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div>
</jqx-scroll-view>
moveThreshold int 0.5

Sets or gets the moveThreshold property.

<script src="~/jqwidgets/jqxscrollview.js"></script>

@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>

@{
    ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
    .photo {
        width: 600px;
        height: 450px;
        background-color: #000;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<jqx-scroll-view >
    <div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div>
</jqx-scroll-view>
showButtons bool true

Sets or gets the showButtons property.

<script src="~/jqwidgets/jqxscrollview.js"></script>

@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>

@{
    ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
    .photo {
        width: 600px;
        height: 450px;
        background-color: #000;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<jqx-scroll-view >
    <div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div>
</jqx-scroll-view>
slideShow bool true

Sets or gets the slideShow property.

<script src="~/jqwidgets/jqxscrollview.js"></script>

@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>

@{
    ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
    .photo {
        width: 600px;
        height: 450px;
        background-color: #000;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<jqx-scroll-view >
    <div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div>
</jqx-scroll-view>
slideDuration int 3000

Sets or gets the slideDuration property.

<script src="~/jqwidgets/jqxscrollview.js"></script>

@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>

@{
    ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
    .photo {
        width: 600px;
        height: 450px;
        background-color: #000;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<jqx-scroll-view >
    <div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div>
</jqx-scroll-view>
theme string ''

Sets or gets the theme property.

<script src="~/jqwidgets/jqxscrollview.js"></script>

@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>

@{
    ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
    .photo {
        width: 600px;
        height: 450px;
        background-color: #000;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<jqx-scroll-view >
    <div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div>
</jqx-scroll-view>
width string 320

Sets or gets the width property.

<script src="~/jqwidgets/jqxscrollview.js"></script>

@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>

@{
    ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
    .photo {
        width: 600px;
        height: 450px;
        background-color: #000;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<jqx-scroll-view >
    <div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div>
</jqx-scroll-view>

Events

pageChanged Event

Code examples

Bind to the pageChanged event of jqxScrollView. 

<script src="~/jqwidgets/jqxscrollview.js"></script>

@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>

@{
    ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
    .photo {
        width: 600px;
        height: 450px;
        background-color: #000;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<jqx-scroll-view on-page-changed="eventHandler()">
    <div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div>
</jqx-scroll-view>

							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Methods

back Method 
<script src="~/jqwidgets/jqxscrollview.js"></script>

@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>

@{
    ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
    .photo {
        width: 600px;
        height: 450px;
        background-color: #000;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<jqx-scroll-view instance="getInstance()">
    <div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div>
</jqx-scroll-view>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["back"]();									
	}									
</script>									
}
changePage Method 
<script src="~/jqwidgets/jqxscrollview.js"></script>

@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>

@{
    ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
    .photo {
        width: 600px;
        height: 450px;
        background-color: #000;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<jqx-scroll-view instance="getInstance()">
    <div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div>
</jqx-scroll-view>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["changePage"]();									
	}									
</script>									
}
forward Method 
<script src="~/jqwidgets/jqxscrollview.js"></script>

@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>

@{
    ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
    .photo {
        width: 600px;
        height: 450px;
        background-color: #000;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<jqx-scroll-view instance="getInstance()">
    <div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div>
</jqx-scroll-view>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["forward"]();									
	}									
</script>									
}
refresh Method 
<script src="~/jqwidgets/jqxscrollview.js"></script>

@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>

@{
    ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
    .photo {
        width: 600px;
        height: 450px;
        background-color: #000;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<jqx-scroll-view instance="getInstance()">
    <div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div>
</jqx-scroll-view>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["refresh"]();									
	}									
</script>									
}