<div id="example" style="margin:auto; width:60%">
    <div id="scrollView" style="height: 600px; width:100%;"></div>
</div>

<script id="scrollview-template" type="text/x-kendo-template">
    # for (var i = 0; i < data.length; i++) { #
    <div  data-role="page" style="width:100%;">
        <img class="carousal-image" src="#=
        getPreviewImageUrl(data[i].Type,data[i].PreviewImageUrl) #"/>
    </div>
    # } #
</script>

<script>
       var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "sample api",
                    dataType: "json"
                }
            },
            pageSize:1,
            schema: {
                data: "items"
            },

        });

        $("#scrollView").kendoScrollView({
            dataSource: dataSource,
            template: $("#scrollview-template").html(),
            contentHeight: "100%"

        });
</script>
Sample josn data

{
    "items": [
        {

            "PreviewImageUrl": "/images/ui/Default_News.png",
            "Type": "NewsType"
        },
        {
            "PreviewImageUrl": "/images/ui/Default_Blog.png",
            "Type": "BlogType"
        }
    ],
    "total": 2
}