Carousel with dynamic content

Introduction

For an application I needed a carousel to display images on the frontpage. Since we go “all-in” Bootstrap the “natural choice” would be the Carousel component from the Extension Library. Unfortunately that control currently only accepts “static” slideNodes so I had to come up with something similar.

In the beginning…

First I just took the sample code from W3schools how to setup a basic Bootstrap Carousel component.

car_code01

Second I set up a Notes view that contains the data I need for my carousel. This view will be the source for an XPages Rest Service control (PDF alert) which I call after page load with an Ajax call using jQuery’s getJSON.

car_code02

car_code03

As you can see I update the Bootstrap sample code with the received result(s).

As a result I get the Carousel component from Bootstrap but now with ‘dynamic content’.

carousel

(for those who have never seen a Carousel)

The only complication I experienced was due to the fact that I separate the design from the data and accessing the data is easier in SSJS/Java then CSJS.

Here is the code: Link Dropbox

Happy development =)

Advertisements

2 thoughts on “Carousel with dynamic content

  1. Csaba Kiss 2016-January-5 / 6:39 pm

    I prefer to roll my own Bootstrap in an XPage application. I feel that it gives me more flexibility.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s