Question 282229 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to add an interval for auto scroll in kendo scroll view?

I want to add a functionality such that the carousel keeps changing for a short interval of time. I was unable to find a solution for this which uses only jQuery.

Code checked out on Kendo website: https://demos.telerik.com/kendo-ui/scrollview/events

I checked out and found the automaticViewChangeInterval for vue js and angular but found nothing on jquery

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/scrollview/events">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-main.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
    
    

    <link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
    <script src="../content/shared/js/console.js"></script>
</head>
<body>
    <div id="example" style="margin:auto; width:70%">
    <div id="scrollView" style="width: 660px; height: 420px; max-width: 100%; margin: auto;">
        <div class="photo photo1" data-role="page">
        </div><div class="photo photo2" data-role="page">
        </div><div class="photo photo3" data-role="page">
        </div><div class="photo photo4" data-role="page">
        </div><div class="photo photo5" data-role="page">
        </div><div class="photo photo6" data-role="page">
        </div><div class="photo photo7" data-role="page">
        </div><div class="photo photo8" data-role="page">
        </div><div class="photo photo9" data-role="page">
        </div><div class="photo photo10" data-role="page">
        </div>
    </div>   
    <script>
        $(document).ready(function () {


            function onChange(e) {
                kendoConsole.log("page " + e.nextPage);
            }

            function onRefresh(e) {
                kendoConsole.log("Total: " + e.pageCount + " Current: " + e.page);
            }

            $("#scrollView").kendoScrollView({
                enablePager: true,
                contentHeight: "100%",
                change: onChange,
                refresh: onRefresh
            });
        });
    </script>
</div>

<style>


    #scrollview-home .photo {
        display: inline-block;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .photo1 {
        background-image: url("../content/shared/images/photos/11.jpg");
    }

    .photo2 {
        background-image: url("../content/shared/images/photos/12.jpg");
    }
    
</style>

        <div class="kd-example-console">
            <div class="header">
                <span class="title">CONSOLE LOG</span>
                <span class="clear kd-text-secondary">Clear log</span>
            </div>
            <div class="console"></div>
        </div>

</body>
</html>
Tags:

2

Answers


  1. 0

    There is no such configuration in the API indeed. But you could use the next and/or scrollTo methods to achieve similar result. Here is a modified example.

    Login or Signup to reply.
  2. 0

    The example is great! Thank you!!!

    Now, if we add another 5-second pause after clicking on the radio button of the page, we can recommend TELERIK for use.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search