layout 2 jcarousel broken

[MASHtm]

I use map layout 2 with the nice jcarousel. At least with Firefox and Seamonkey it appears broken. The "previous" button is not visible at all. The size of the jcarousel-wrapper seems odd. If there is enough room to display all thumbs it doesn't use it, and otherwise it is oversized to the right border and the "next" button is not visible as well. The "next" button is also displayed outside of the jcarousel-wrapper DIV.

Updating the jcarousel files to 0.3.5 didn't fix it.

[MASHtm]

These two patches fix all issues I had with layout 2. Without "postition: relative" in .jcarousel-wrapper the next/prev buttons took a position relative to the outer "ribbon-map-wrapper" element.

The nb_items_width calculation was not using effective thumdnail size. And the "ul" element needs at least the size of nb_items_width. Otherwise the elements are not scrolled in from right side correctly.

The on.reload and on.create calls seem to be leftovers from the jcarousel responsible example and are wrong IMO.

I still use jcarousel 0.3.5. Maybe you want to update your distributed version as well.

--- /tmp/jcarousel.responsive.css	2017-11-28 17:03:53.296466463 +0100
+++ leaflet/jcarousel.responsive.css	2017-11-28 17:04:29.358009279 +0100
@@ -1,4 +1,5 @@
 .jcarousel-wrapper {
+    position: relative;
     margin: 5px auto;
 	/** display: none; **/
     border: 5px solid #fff;

--- /tmp/osm-map2.tpl	2017-11-28 17:04:01.347587652 +0100
+++ template/osm-map2.tpl	2017-11-28 17:05:33.481974502 +0100
@@ -475,7 +475,7 @@
 
 		/* Update jcarousel and all witdh*/
 		if (nb_items>0) {
-			var nb_items_width = nb_items*45; /* img is 40px + margin 5px */
+			var nb_items_width = nb_items*60 - 10; /* img is 50px + margin 10px, -1 margin */
 			var document_width = $( document ).width();
 			var nav_width = document.getElementById('ribbon-map-nav').offsetWidth;
 			var results_width = document.getElementById('ribbon-map-results').offsetWidth;
@@ -500,6 +500,7 @@
 			/* Update jcarousel width size */
 			document.getElementById('jcarousel-wrapper').setAttribute('style','max-width:'+jcarousel_width+'px;');
 
+			document.getElementById('jcarousel-thumb').setAttribute('style','width:'+nb_items_width+'px;');
 			/* Make it all visible */
 			document.getElementById('ribbon-map-wrapper').setAttribute('style','visibility:visible;');
 			$('.jcarousel').jcarousel('reload');
@@ -562,17 +563,6 @@
 			var jcarousel = $('.jcarousel');
 
 			jcarousel
-				.on('jcarousel:reload jcarousel:create', function () {
-					var width = jcarousel.innerWidth();
-
-					if (width >= 600) {
-						width = width / 3;
-					} else if (width >= 350) {
-						width = width / 2;
-					}
-
-					jcarousel.jcarousel('items').css('width', width + 'px');
-				})
 				.jcarousel({
 					wrap: 'circular'
 				});