An animated news slider
JavaScript CSS
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

News Slider


Get an animated news slider in 5 steps!

How to install

  1. Cloning the project:
  1. Adding resources:
  • Go to the back-office of eXo Platform (using the File Explorer).
  • Add a content folder (NewsFolder for example) in which you'll store the news items (for example under /shared), you may create news using the 'Free Layout Webcontent' template, try to add an illustration image and fileout a summary, in order to be displayed as a preview of the news in our news silder.
    PS: For tests, you can import the artificat NewsFolder.xml into your File System.
  • Upload the CSS file NewsSlider.css to any location you want (for example: under /shared/css) and copy its path[1].
  • Upload the JS file jquery.easing.min.js (which is the JQuery librairy) to any location you want (for example: under /shared/js) and copy its path[2].
  1. Update the resources paths:
  • Go to the template file NewsSliderCLVTemplate.gtmpl and update the exacte location of the resources, for both JS and CSS files (already saved in [1] and [2], if not go back to this files /shared/js and /shared/css, right click on the file, select the last menu entry 'Copy URL to clipboard' and past it the src parameter like below:

        <link rel="stylesheet" type="text/css" href="/rest/jcr/repository/collaboration/sites content/live/shared/css/NewsSlider.css" media="all"/>
        <script type="text/javascript" src="/rest/jcr/repository/collaboration/sites content/live/shared/js/jquery.easing.1.3.js"></script>
  • Ensure that the path is not a private link in order to make the news viewable for guests (for that, delete /private from the path).

  1. Add the template via IDE:
  • Go to the IDE, select the dms-system workspace, navigate to exo:ecm > views > templates > content-list-viewer > list .
  • Add a new template.
  • Copy/Past the content of the GTMPL file NewsSliderCLVTemplate.gtmpl into this template and save it as NewsSliderCLVTemplate.
  1. Add the CLV and configure it:
  • Now, we are ready to add our news slider into a website.
  • Go to a given website, ACME for example, edit the layout, add a new portlet (content > content list) to a given page.
  • Edit this content list portlet, configure it by selecting the news folder path (in our case, '/shared/NewsFolder', and selecting our new CLV template NewsSliderCLVTemplate
  • It's possible also to configure the slider on terms of amount of news, existence of pagination or not.