Fix arrows styles and functionality

src/collective/nitf/browser/templates/slideshow.pt

@@ -1,4 +1,5 @@
-<div class="slideshow-container"
+<div id="nitf-slideshow"
+     class="slideshow-container"
      tal:define="images context/get_images"
      tal:condition="images">
   <div class="slideshow-player">
@@ -8,7 +9,9 @@
          data-cycle-swipe="true"
          data-allow-wrap="true"
          data-cycle-fx="fade"
-         data-cycle-log="false">
+         data-cycle-log="false"
+         data-cycle-prev="#nitf-slideshow .cycle-prev"
+         data-cycle-next="#nitf-slideshow .cycle-next">
       <div tal:repeat="image images">
         <img tal:replace="structure image/@@images/image/large" />
       </div>

src/collective/nitf/webpack/app/main.css

@@ -136,11 +136,15 @@
     position: absolute;
     z-index: 110;
     top: 0;
+    bottom: 0;
+
+    overflow: hidden;
 
-    width: 25%;
-    height: 79%;
+    width: 15%;
 
     cursor: pointer;
+    white-space: nowrap;
+    text-indent: 101%;
 
     opacity: .7;
     border: none;
@@ -149,13 +153,13 @@
 {
     left: 0;
 
-    background: url(images/prev-arrow.png) no-repeat scroll 10% 50% rgba(0, 0, 0, 0);
+    background: url(images/prev-arrow.png) no-repeat scroll 20% 50% rgba(0, 0, 0, 0);
 }
 .cycle-next
 {
     right: 0;
 
-    background: url(images/next-arrow.png) no-repeat scroll 90% 50% rgba(0, 0, 0, 0);
+    background: url(images/next-arrow.png) no-repeat scroll 80% 50% rgba(0, 0, 0, 0);
 }
 .cycle-prev:hover,
 .cycle-next:hover
@@ -277,11 +281,18 @@ a.edit-tile-link
 {
     min-width: 100%;
 }
-.cycle-slideshow
+.slideshow-container
 {
+    display: flex;
+    flex-direction: column;
+
     max-width: 65%;
     margin: 0 auto;
 }
+.slideshow-player
+{
+    position: relative;
+}
 .cycle-slideshow .cycle-slide img
 {
     position: relative;
@@ -300,7 +311,8 @@ a.edit-tile-link
 }
 
 /* Stops pagers being misplaced when multiple carousel tiles on page */
-.tile
+.tile,
+.slideshow-container
 {
     position: relative;
 }