PDA

View Full Version : Carousel Functionality - Looping, Autoplay, renderTo



Nesnora
19 Jan 2011, 11:14 AM
Hi there, I've been searching all over for solutions to several features of functionality I would like to create with my carousel, but either threads on these things have been unresolved, or it has and the original poster does not post the outcome, or it simply doesn't work when I try it.

I'm looking to loop the carousel, autoplay and put the carousel in a div.

I tried following the thread about putting the carousel in a div, but it didn't work with the code below. I should mention I'm the designer on this project, trying to help our crunched IT team with as much CSS and a little of this, so my javascript knowledge sucks.

html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sencha Testing</title>

<!-- Sencha Touch JS -->
<script type="text/javascript" src="sencha-touch.js"></script>


<!-- Application JS -->
<script type="text/javascript" src="index.js"></script>


<style>
body {
background-color: #376daa;
}
.card {
text-align: center;
color: #204167;
text-shadow: #3F80CA 0 1px 0;
font-size: 72px;
height:100px;

}

.x-phone .card {

font-size: 36px;
}

.card p {
font-size: 24px;
line-height: 30px;
}

.x-phone .card p {
font-size: 16px;
line-height: 18px;
}
</style>


</head>
<body>
<div ID="carousel"></div>
</body>
</html>index.js:

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items
var carousel1 = new Ext.Carousel({

defaults: {
cls: 'card',
renderTo: 'carousel',
width: 320,
height:100,

},
items: [{
title: 'Tab 1',
html: '<div id ="outerDiv" style=" width:100%; background-color:grey; overflow:hidden;"><img width="100%"; src="images/carousel01.jpg"></div>'
},
{
title: 'Tab 2',
html: '<div id ="outerDiv" style=" width:100%; background-color:grey; overflow:hidden;"><img width="100%"; src="images/carousel02.jpg"></div>'
},
{
title: 'Tab 3',
html: '<div id ="outerDiv" style=" width:100%; background-color:grey; overflow:hidden;"><img width="100%"; src="images/carousel03.jpg"></div>'
},
{
title: 'Tab 4',
html: '<div id ="outerDiv" style=" width:100%; background-color:grey; overflow:hidden;"><img width="100%"; src="images/carousel04.jpg"></div>'
},
{
title: 'Tab 5',
html: '<div id ="outerDiv" style=" width:100%; background-color:grey; overflow:hidden;"><img width="100%"; src="images/carousel05.jpg"></div>'
}]
});

}
});Any help would be appreciated.