Documentation

Getting Started

jqxScrollView

jqxScrollView represents a widget which can be used for viewing content which is wider than the visible area outlined by the device's screen. Specific item can be chosen using drag movements or clicking/tapping on the buttons at the bottom of the jqxScrollView.

The first step is to create html page and add links to the javascript files and CSS dependencies to your project. The jqxScrollView plugin requires the following files: 

<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollview.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>

The next step is to create a UL element within the body of the html document. 
    <div id="photoGallery">
        <div><div class="photo" style="background-image: url(../../images/nature1.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature2.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature3.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature4.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature5.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature6.jpg)"></div></div>
    </div>
The last step is to select the UL element and to build the widget by calling the jqxListMenu constructor. 
    <script type="text/javascript">
        $(document).ready(function () {
            $('#photoGallery').jqxScrollView({ width: 600, height: 450 });
        });
    </script>

To set a property (option), you need to pass the property name and value(s) in the jqxScrollView's constructor. 
    $("#element").jqxScrollView({ currentPage: 1 });
To get a property(option), you need to pass the property name to the jqxScrollView's constructor. 
    var currentPage = $("#element").jqxScrollView('currentPage');

Basic ScrollView Sample

<!DOCTYPE html>
<html lang="en">
<head>
    <title>JavaScript ScrollView</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"/>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollview.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(function () {
            var theme = getTheme();
            $('#photoGallery').jqxScrollView({ width: 600, height: 450, buttonsOffset: [0, 0], theme: theme });
            $('#StartBtn').jqxButton({ theme: theme });
            $('#StopBtn').jqxButton({ theme: theme });
            $('#StartBtn').click(function () {
                $('#photoGallery').jqxScrollView({ slideShow: true });
            });
            $('#StopBtn').click(function () {
                $('#photoGallery').jqxScrollView({ slideShow: false });
            });
        });
    </script>
    <style type="text/css">
        .photo
        {
            width: 600px;
            height: 450px;
            background-color: #000;
            background-position: center;
            background-repeat: no-repeat;
        }
    </style>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class="default">
    <div id="photoGallery">
        <div><div class="photo" style="background-image: url(../../images/nature1.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature2.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature3.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature4.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature5.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature6.jpg)"></div></div>
    </div>
    <div style='margin-top: 20px;'>
        <b>Settings</b>
        <br />
        <div>
            <input type="button" value="Start Slideshow" id="StartBtn" />
            <input type="button" value="Stop Slideshow" id="StopBtn" />
        </div>
    </div>
</body>
</html>

The result of the above code is: