Saturday, November 8, 2014

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 -  




video


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:-)

4 comments:

  1. Excellent approach instead of mixing HTML and ADF faces.

    ReplyDelete
  2. Nice article Satish i have one small question now we have altaUI for responsive design can we add bootstrap components in adf jsff pages compare with alta bootstrap have many and easy if u have any idea can u share here

    ReplyDelete
    Replies
    1. Thanks Raja, Bootstrap components just requires DIVs and SPANs.. You can create both using PanelGroupLayout layout="vertical" and outputText respetcively.. given that all you you need is to copy the HTML structure and modify into repective ADF and you are good..

      Delete