Carousel in ADF using Slick plugin

ADF Faces ships in with its own carousel component which is pretty much easy to use but it has limited options in terms of UI, not responsive and not very slick ;-) 

Slick  is a light weight  jquery plugin, which is used to build, glossy, responsive carousels with lot of cool options but it requires a requires a specific HTML  to    function -

<div class="your-class">
        <div>your content</div>
        <div>your content</div>
        <div>your content</div> 
</div>

Before we go on, Have a look at the awesome Slick plugin and its options for carousels.

Since it is highly recommended not to use HTML in ADF pages, the solution is to choose ADF components which generates the desired HTML for Slick.js to work on, Here we go with a working sample -

Page structure using ADF faces component which generates HTML Structure required for Slick plugin -

  <af:panelGroupLayout  layout="vertical">
       <af:iterator >
           <!-- content -->
        </af:iterator>
   </af:panelGroupLayout>

The complete page with carousel would look like -  

As i said there are lot of other cool carousel types available 

in Slick plugin to try out and it's very easy to use.

Hope this helps:-)