View Full Version : Simple html version of carousel

13 Jul 2010, 11:06 PM
Good morning,

I'm working on a long-winded project for which the carousel would be an incredibly useful component. However, I require the use of an html system for handling the information, yet the example has the information for the carousel hardwired into the js. THe documentation isn't really that useful for giving the 'aha' inspiration for me to get the idea working.

In short, is there a way to get a carousel to work with a div in css?

For that matter, is there a way to get a div to scroll using sencha?

(I've got a system working using a different javascript here {Works only on iphones right now}: http://straathof.acadnet.ca/index2.php/ what I am looking for is a way to let one swipe left or right to go between articles, and yet scroll through the text in the articles)

NOTE: the scroll can be on a different div. I just haven't found a useful example for it on this site yet.

13 Jul 2010, 11:23 PM
I'm not really sure what you mean by:

In short, is there a way to get a carousel to work with a div in css?

However I'm guessing you want to load the content for the carousel from markup, if so, it's quite trivial:


<div style="display: none;">
<div id="c1">Content 1 here</div>
<div id="c2">Content 2 here</div>
<div id="c3">Content 3 here</div>


tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
var carousel1 = new Ext.Carousel({
defaults: {
cls: 'card'
items: [{
contentEl: 'c1'
}, {
contentEl: 'c2'
}, {
contentEl: 'c3'

new Ext.Panel({
fullscreen: true,
layout: 'fit',
items: carousel1

14 Jul 2010, 7:41 AM
Thank you for the response, and the solution.

I was hoping to reuse the div name instead of having div names preprogrammed into the javascript and html...

My goal is to mimic the behaviour of the Popular Science magazine, but for a wide range of devices instead of just one. This is part of a larger goal which includes a publication system that is currently being built on Google App Engine, where you can build issues of publications online as easily as writing a series of dedicated blog entries.

However, pouring all of that information into a format which can be read on any digital device is the ultimate goal, and one which I believe Sencha will work better than the different script libraries I am using in the example linked above. (sharamag)

If you look at this example: http://www.sencha.com/playpen/ext-core-latest/examples/carousel/ you can see at the bottom that there is a series of cards with text in them, but the text is not scrollable. It has an item identifier which implies the ability to call a specific div name to use as a carousel card...

Ext.onReady(function() {
new Ext.ux.Carousel('html-example', {
itemSelector: 'div.item',
interval: 5,
autoPlay: true,
transitionEasing: 'easeIn'

Some simple CSS for identifying it

div.item {
padding: 20px;

and it should work well for my ultimate goal, since the div can contain a number of elements that would move together as a group.

<div id="html-example" style="padding: 5px; height: 250px; width: 600px; background-color: #F6F6F0; color: black">
<div class="item">
A massive gob of scrollable text.
<div class="item" title="texterlicious">
A great gob of scrollable text>
<div class="item" title="More of that text">
<h3>More Text</h3>
A great gob of text

Using it in this manner with Ext-Touch-Debug.js causes an error: ext-touch-debug.js:15706TypeError: Result of expression 'this.indicators' [undefined] is not an object.

The code for the example was generated in 2009 and uses another javascript for carousel.js (I'll be testing the inclusion of that shortly) I would like to keep the number of files down to a minimum since this will eventually have a cache system, allowing people to save a magazine to read later...

but the question remains: Can you designate a div in sencha that can be used as a card on a carousel.

(sorry for the longwinded reply... I've been at this for a while now)

15 Jul 2010, 8:31 AM
Thank you. I shall try it with the suggestion and see if I can get it to work for my needs.


15 Jul 2010, 9:55 AM
I have an example running, but a few more small questions regarding sizing and clicks...


This has a few portions copied from my original prototype... If you open it on an iphone or ipod touch (Not sure about the others yet) you can at least push left and right.

Question 1: since this uses the 'onload' and 'onorientationchange' to make the menu bar scroll up, the bottom of the screen is not being set properly... Does anyone know how to make it so the the size is not set until the menu bar has scrolled up?

Question 2: My original prototype used iscroll to scroll the text, but it wasn't compatible with androids, it also wouldn't work consistently and it was 'pokey'... A good library, and easier to understand than touchscroll's example, but I would like to use Sencha as much as possible for this project (the basics of which will be made publicly available) Can someone tell me how I can set the div class "Article-container" to scroll?

Question 3: The original prototype also incorporated some slide-ins and toggling from mootools. Could someone direct me to which part of Sencha would be most appropriate to use for this? (Basically, the main menu "Sharamag 1.4" should be clickable so all text underneath shows up, as should the titles of each article be clickable so the text shows up)

Question 4: Originally the majority of the action took place on a single background, but since the carousel is in place, being able to click on a link to go to a specific card would be awesomer than awesome. Is there some way to animate the movement from the main menu to go to a specific card from the main menu?

I'm still working on this, reading through as much as I can find, but if any of the awesomer than awesome Sencha gurus could help, I can make the basics available faster...