carousel with twitter bootstrap 3

Hi,

Im creating a carousel based on Twitter Bootstrap, primarily through getResources.

The Twitter Bootstrap Carousel puts an indicator for the number of slides and the active slide within the carousel, like this [this is just a small section of the carousel code output]:



What is the best way of displaying a list item for each resource to be displayed? In other words these carousel-indicators need to be displayed and rendered dynamically, according to how many slides their are?

Many thanks in advance for any help.


Dan.

You should be able to use a placeholder [[+idx]] in the tpl for generating the list.

Quote from: sottwell at Jun 06, 2014, 05:34 AM

You should be able to use a placeholder [[+idx]] in the tpl for generating the list.

Thanks for the reply - so would it be a case of using two GetResources calls - one for the nav and one for actually rendering the slides? - Im guessing it owuldnt be an issue if the ID of the resources isnt in a sequential order?

Thanks,

Dan.

So you have multiple carousels, each with multiple items?

Quote from: sottwell at Jun 06, 2014, 06:20 AM

So you have multiple carousels, each with multiple items?

Sorry Susan,

It's me being lazy and not doing my research - I now understand how [[+idx]]works, and I can see how I can use it to both apply the active class to each slider and count the slides, I think.

Will finish my work and post what I have done here, hopefully when complete, if anyone wants to borrow the chunks and code.

Sounds like a good candidate to add to my ever-growing list of goodies to add to my Cookbook. Someday I even have to get around to adding the "recipes" to the site!

Hi, not sure if this the *best* way to do this, but here is a solution Im working on. Most of this uses the base CSS provided by Bootstrap, but you might need to tweak it to custom to your requirements.

Scenario: fetch a set of page banners/images, page headings and links and output them to a Twitter Bootstrap 3 carousel on the home page.



Extensions / Modules:

getResources
pthumb
Bootstrap

1) Template Variables: create a template variable called: bannerImage and set its input to 'Image'. Associate this TV with the appropriate templates, and from the pages, upload a banner image for each page.

2) Then create a chunk that contains the outer elements of your carousel (I call this carouselOuter) - place [[$carouselOuter]] in the template / place you want the carousel to appear.




3) Notice the chunk called CarouselCountOuter - that is the outer container for the dotted navigation bar. If you dont want to see the dotted navigation, leave this out.
Also, in this example, getResources is pulling all the child parents under the resource with an ID of '2' - change this to whatever resource you wish to target).

4) Next create a chunk called carouselItem - this will be called in getResources call and will fetch each carousel slide:



(Note here [[+idx]] is used target the first resource and apply the class 'active' to it - this is removed and added dynamically by Bootstrap scripting to the current visible slide). pthub is used to crop-zoom and render the image at a certain width and height. Change these settings to your needs - see pthumb / phpthumbof in the modx help docs for ore info)

5) To display the navigation dots, create a chunk called carouselCountOuter:



6) ...and then finally to display a list and count / fetch a navigation marker 'dot' for each carousel - create a chunk called carouselCountInner:



(Note again, this is where [[+idx]] comes to the rescue - the carousel knows which slide to target by using [[+idx]] with the decrement filter because the first slide starts on '0' whereas the [[+idx]] starts at 1 - in otherwords the 'data' resource starts at 0 -the modx resource starts at 1).

Im not absolutely sure if this is the best way of doing this - any input or feedback gratefully received.



Dan.

Hi Danny Boy,

Thanks for sharing your recipe. This is exactly what I was looking for and your solution works fine. I am curious though, is there a way to call getResources just once while output results in two different templates (for slides and for dot controls)? Because as is we execute essentially identical getResources queries twice. Not that it matters on a page that doesn't have huge traffic. Still looks somewhat clumsy.

sottwell "Someday I even have to get around to adding the "recipes" to the site!" - brilliant idea!

Call both getResources cached, then they run only the first time, after the cache was cleared.