Index: webapp/cms/skins/demo/resources/js/jquery.featureList-1.0.0.js
===================================================================
--- webapp/cms/skins/demo/resources/js/jquery.featureList-1.0.0.js	(revision 15958)
+++ webapp/cms/skins/demo/resources/js/jquery.featureList-1.0.0.js	(working copy)
@@ -16,7 +16,7 @@
 		return this;	
 	};
 
-	$.featureList = function(tabs, output, options) {
+	$.featureList = function(node, tabs, output, options) {
 		function slide(nr) {
 			if (typeof nr == "undefined") {
 				nr = visible_item + 1;
@@ -38,7 +38,41 @@
 		options.pause_on_hover		= options.pause_on_hover			|| true;
 		options.transition_interval	= options.transition_interval		|| 5000;
 		options.transition_mouseenter	= options.transition_mouseenter	|| false;
+		options.pauseText = options.pauseText || "Pause";
+		options.playText = options.playText || "Play";
+
+		var running = true;
+		var timer = null;
+		
+		pause = function() {
+			clearInterval(timer);
+		}
+		play = function() {
+			clearInterval(timer);
+			timer = setInterval(function () { slide(); }, options.transition_interval);
+		}
+		
 
+		
+		node.addClass("js");
+		$j(node[0].parentNode).append("<div class='featureListButton'><button class='featureListControl pause' title=\"" + options.pauseText + "\">" + options.pauseText + "</button></div>")
+		var button = $j(node[0].parentNode).find(".featureListButton button")
+		button.click(function() {
+			var b = $j(this); 
+			if (b.hasClass("play"))
+			{
+				b.removeClass("play").addClass("pause").attr("title", options.pauseText).html(options.pauseText);
+				running = true;
+				play();
+			}
+			else
+			{
+				b.removeClass("pause").addClass("play").attr("title", options.playText).html(options.playText);
+				running = false;
+				pause();
+			}
+		})
+		
 		output.hide().eq( visible_item ).show();
 		tabs.eq( visible_item ).addClass('current');
 
@@ -60,21 +94,13 @@
 			});
 		}
 
-		if (options.transition_interval > 0) {
-			var timer = setInterval(function () {
-				slide();
-			}, options.transition_interval);
+		if (options.transition_interval > 0) 
+		{
+			play();
 
-			if (options.pause_on_hover) {
-				tabs.mouseenter(function() {
-					clearInterval( timer );
-
-				}).mouseleave(function() {
-					clearInterval( timer );
-					timer = setInterval(function () {
-						slide();
-					}, options.transition_interval);
-				});
+			if (options.pause_on_hover) 
+			{
+				node.mouseenter(function() { pause(); }).mouseleave(function() { if (running) { play(); } });
 			}
 		}
 	};
Index: webapp/cms/skins/demo/resources/css/services/filtered-contents-feature-list.css
===================================================================
--- webapp/cms/skins/demo/resources/css/services/filtered-contents-feature-list.css	(revision 15958)
+++ webapp/cms/skins/demo/resources/css/services/filtered-contents-feature-list.css	(working copy)
@@ -22,30 +22,38 @@
 {
 	float: right;
 }
-
+.filtered-contents.feature-list-contents div.featureList.js{
+	height: 350px;
+    overflow: hidden;
+    border: 1px solid #B3BBC5; 
+}
 .filtered-contents.feature-list-contents div.featureList {
     position: relative;    
     width: 720px;
-    height: 350px;
-    overflow: hidden;
     margin-top: 15px;
     margin-bottom: 10px;
-	border: 1px solid #B3BBC5;    
 	margin-left: auto;
 	margin-right: auto;
 }
 
 .filtered-contents.feature-list-contents div.featureList ul {
-    position: absolute;
+/*     position: absolute; */
     list-style: none;   
     padding: 0;
     margin: 0;
+    float:left;
 }
 
 .filtered-contents.feature-list-contents ul.featureListTabs {
 	right: 0;
 	z-index: 2;
 	width: 250px;
+/* 	position:absolute; */
+	top:0;
+}
+
+.filtered-contents.feature-list-contents div.featureList.js ul.featureListTabs{
+	float:right;
 }
 
 .filtered-contents.feature-list-contents ul.featureListTabs li img {
@@ -61,7 +69,6 @@
     display: block;
     padding: 5px 10px;
     height: 60px;
-    outline: none;
 }
 
 .filtered-contents.feature-list-contents ul.featureListTabs li a:hover {
@@ -80,19 +87,21 @@
 .filtered-contents.feature-list-contents ul.featureListOutput {
     left: 0;
     width: 470px;
-    height: 340px;
+/*     height: 340px; */
     position: relative;
 }
 
 .filtered-contents.feature-list-contents ul.featureListOutput li {
-    position: absolute;
+/*     position: absolute; */
     width: 470px;
-    height: 340px;
+    height: 350px;
+    float:left;
+    margin-bottom:10px;
 }
 
 .filtered-contents.feature-list-contents ul.featureListOutput .featureListDetails {
-    position:absolute; 
-    top:240px; 
+    position:relative; 
+    top:-113px; 
     left:0; 
     height:94px; 
     background: url("../../img/services/filtered-contents/transparent-bg.png");   
@@ -111,4 +120,21 @@
 	font-style: italic;
 	font-weight: bold;
 	font-size: 1.5em;	
-}
\ No newline at end of file
+}
+.filtered-contents.feature-list-contents .link{
+	float:right;
+	margin-right:10px;
+}
+.filtered-contents.feature-list-contents button.featureListControl.play,
+.filtered-contents.feature-list-contents button.featureListControl.pause{
+	background:transparent url(../../img/services/filtered-contents/dot-pause.png) no-repeat left center;
+	border-width:0;
+	overflow:hidden;
+	padding: 0 7px;
+	cursor:pointer;
+	margin-left: 8px;
+	padding-left:22px;
+	color:#666666;
+}
+.filtered-contents.feature-list-contents button.featureListControl:hover{ text-decoration:underline; }
+.filtered-contents.feature-list-contents button.featureListControl.play{ background-image:url(../../img/services/filtered-contents/dot-play.png);}
\ No newline at end of file
Index: webapp/cms/skins/demo/services/web/pages/services/filtered-contents/feature-list_3.3.xsl
===================================================================
--- webapp/cms/skins/demo/services/web/pages/services/filtered-contents/feature-list_3.3.xsl	(revision 15958)
+++ webapp/cms/skins/demo/services/web/pages/services/filtered-contents/feature-list_3.3.xsl	(working copy)
@@ -65,11 +65,13 @@
     <xsl:template name="contents-js">
     	<xsl:copy-of select="/contents/content/html/head/script"/>
         <script type="text/javascript" src="{ametys:skinURL('js/jquery.featureList-1.0.0.js')}"></script>
-        <script type="text/javascript">            
+        <script type="text/javascript">  
             $j(document).ready(function(){
                 $j.featureList(
+                	$j("#featureList-<xsl:value-of select="$uniqueId"/>"),
                     $j("#featureListTabs-<xsl:value-of select="$uniqueId"/> li a"),
-                    $j("#featureListOutput-<xsl:value-of select="$uniqueId"/> li"), { start_item  : 1 }
+                    $j("#featureListOutput-<xsl:value-of select="$uniqueId"/> li"), 
+                    { start_item : 0, transition_interval: 5000, playText: "<i18n:text i18n:key="SKIN_CAROUSEL_PLAY" i18n:catalogue="skin.{$skin}" />", pauseText: "<i18n:text i18n:key="SKIN_CAROUSEL_PAUSE" i18n:catalogue="skin.{$skin}" />" }
                 );
             });            
         </script>        
@@ -81,24 +83,24 @@
 
     <!-- Used in common.xsl --> 
     <xsl:template name="common-service-body-nonempty-content-title">
-        <xsl:call-template name="rss"/>
+        <xsl:call-template name="rss"/> 
     
         <xsl:call-template name="common-service-body-nonempty-content-title-content">
             <xsl:with-param name="title" select="$service-title"/>
-        </xsl:call-template>    
+        </xsl:call-template>   
     </xsl:template>
     
     <!-- Used in common.xsl -->
     <xsl:template name="common-service-body-nonempty-content-content">
-        <div class="featureList">
-            <ul id="featureListOutput-{$uniqueId}" class="featureListOutput">
-                <xsl:apply-templates select="content[position () &lt;= 5]" />                    
-            </ul>        
+        <div id="featureList-{$uniqueId}" class="featureList">
             <ul id="featureListTabs-{$uniqueId}" class="featureListTabs">
                 <xsl:apply-templates select="content[position () &lt;= 5]" mode="tab"/>              
-            </ul>                        
-        </div>    
-        
+            </ul>    
+            <ul id="featureListOutput-{$uniqueId}" class="featureListOutput">
+                <xsl:apply-templates select="content[position () &lt;= 5]" />                    
+            </ul>  
+                             
+        </div>     
         <div class="cleared"><xsl:comment>empty</xsl:comment></div>
         
         <xsl:call-template name="link"/>                
@@ -129,13 +131,14 @@
             
     <!-- Template for tab -->
 	<xsl:template match="content" mode="tab">
-        <xsl:variable name="type" select="html/head/meta[@name = 'illustration/image;type']/@content"/>        
+        <xsl:variable name="type" select="html/head/meta[@name = 'illustration/image;type']/@content"/>    
         <xsl:variable name="file" select="html/head/meta[@name = 'illustration/image;path']/@content"/>
         <xsl:variable name="url" select="concat($file, '?contentId=', @id)"/>
         <xsl:variable name="alt-text" select="html/head/meta[@name = 'illustration/alt-text']/@content"/>
     
 		<li>
-            <a href="javascript:;">
+            <a onclick="return false;">
+            	<xsl:attribute name="href">#featureListOutput-<xsl:value-of select="$uniqueId"/>-<xsl:value-of select="position()" /></xsl:attribute>
                 <img src="{resolver:resolveImage($type, $url, 50, 80)}" alt="{$alt-text}"/>
                 <xsl:value-of select="html/head/meta[@name = 'title']/@content" />
             </a>                          
@@ -143,13 +146,14 @@
 	</xsl:template>
 
     <xsl:template match="content">
-        <xsl:variable name="type" select="html/head/meta[@name = 'illustration/image;type']/@content"/>        
+        <xsl:variable name="type" select="html/head/meta[@name = 'illustration/image;type']/@content"/>     
         <xsl:variable name="file" select="html/head/meta[@name = 'illustration/image;path']/@content"/>
         <xsl:variable name="url" select="concat($file, '?contentId=', @id)"/>
         <xsl:variable name="alt-text" select="html/head/meta[@name = 'illustration/alt-text']/@content"/>
         <xsl:variable name="page-id" select="html/head/meta[@name = 'pages/page;id']/@content"/>
         
         <li>
+        	<xsl:attribute name="id">featureListOutput-<xsl:value-of select="$uniqueId"/>-<xsl:value-of select="position()" /></xsl:attribute>
             <img src="{resolver:resolveImage($type, $url, 350, 470)}" alt="{$alt-text}"/>            
             <div class="featureListDetails">
                 <a href="{resolver:resolve('page', $page-id, false)}" class="title"><xsl:value-of select="html/head/meta[@name = 'title']/@content" /></a>
@@ -167,7 +171,7 @@
                     </xsl:call-template>
                     <xsl:text> </xsl:text>
                     <a href="{resolver:resolve('page', $page-id, false)}"><i18n:text i18n:key="CONTENT_VIEW_READMORE" i18n:catalogue="plugin.cms"/></a>
-                </p>      
+                </p>   
             </div>
         </li>
     </xsl:template>