Using the Carousel Container in Oracle APEX

Carousels or sliders are quite a common thing to see on web pages nowadays. They were one of many complicated things that were made easy with the introduction of the Universal Theme in APEX 5. This was achieved through a Carousel Container template. Here’s a simple step by step guide on how to implement it.

First of all decide on how many times you want the carousel to slide through. In my example I’m going for 3. So my first task is to load in the 3 images I want to use:

Make a note of the three references – you will need them later on eg

  • #APP_IMAGES#lesson1.jpg
  • #APP_IMAGES#trainingCourse.jpg
  • #APP_IMAGES#trainingRoom.jpg

Now go to the page you want to display the Carousel on and create four Static Content regions – I’ve called mine Carousel, Slider1, Slider2 and Slider3 but you can call them what you want.

Next set the Carousel to be the Parent Region for the other 3:

Now change the template for the region called Carousel to Carousel Container and change the following template options:

  • Timer: set to 5 Seconds
  • Animation: set to Slide
  • Header: set to Hidden
  • Body Overflow: set to Hide

In the other 3 sub-regions change the Template property to Blank with Attributes:

And now in each sub-regions check that the Output As attribute is set to HTML:

Add the following image tag in the source property for the Slider1 – remember to change the path to your own image:

<img src="#APP_IMAGES#trainingCourse.jpg" width="1100px" height="350px" />

Depending on the size of your image you may need to change the values for the width and height attributes.

Repeat this step for each of the other two sub-regions – changing the images appropriately.

Now run the page and you should see your carousel displaying your images one after another.

You will see that the image is currently aligned to the left – to center we can use some CSS. Go to the page attributes and in the Inline property under CSS add the following:

.centerImage {
text-align: center;
}

Now enter the class you have just created (centerImage) in each of the sub-regions’ Appearance -> CSS property:

Now run the page and you should see the regions centered:

If you have a look at the  Universal Theme Sample Application you will see there are loads of other settings you can use with Carousals.

Posted in APEX.