This is a migrated thread and some comments may be shown as answers.

Kendo UI Home page rotator

3 Answers 182 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 20 May 2012, 09:58 AM

Is the rotator with the orange background on the home page of Kendo UI made with kendo UI web components?

 I like the way it works and would like to build a similar mechanism into my own web page.

3 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 22 May 2012, 08:57 AM
Hi Andrew,

We haven't used any of the Kendo UI web components to build the rotator, because we needed a very custom functionality for it, which our components don't (yet) have.

If you want to build something similar for your website, you can search for a tutorial on how to create a parallax slider. Here's a good one that is inspired by our slider: http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/

Kind regards,
Dimitar
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Andrew
Top achievements
Rank 1
answered on 23 May 2012, 10:14 AM
Oh, that is a pity. I was looking for an excuse to use Kendo UI.
You have seriously cool looking components. 
0
Kyle schultz
Top achievements
Rank 1
answered on 19 Apr 2013, 02:19 AM
Dimitar,

I am just theorizing here, but couldn't Andrew achieve his goal of having a rotator using KendoUI  by using something similar to the following code

<div id="app"></div>
<script>
    $(function() {
        var rotateInterval = 10;
        var rotatorIndexes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
        //this could also be a string array returned from a json call retrieving the config from a db;
//this array could be an array of any set of ids or names. The JavaScript below could be modified to fit your format.
        var x = 0;
        
        $("#app").empty();
        var rotator = new function() {
            kendo.fx($("#app")).fade("out").play();

            var index = new kendo.View('/_A_URL_TO_A_VIEW_IN_YOUR_MVC_SITE/' + rotatorIndexes[x]);
            index.render("#app");
            kendo.fx($("#app")).fade("in").play();
            
            x++;
            if (x > rotatorIndexes.length - 1)
                x = 0;
        };

        setTimeout("rotator", rotateInterval);
        
    });

</script>

I don't know for sure if that would work, but it seems easy enough to test.

I have been using Telerik controls for a very long time and just recently made the leap to KendoUI, I can already tell how this set of controls and framework will make coding the UI of our applications very dynamic and very interactive, with very little work.

Thanks for making such a kick ass suite of controls, it really makes it nice to be able to harness the power of your controls and make it interact with our data.
 

Tags
General Discussions
Asked by
Andrew
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Andrew
Top achievements
Rank 1
Kyle schultz
Top achievements
Rank 1
Share this question
or