ISTWCMS-5650: Use flickity prev next buttons - fix all prev next challenges

src/patterns/04-components/image-gallery/_image-gallery.scss

@@ -8,14 +8,16 @@ $size-medium: 4;
 $size-large: 4;
 $size-xlarge: 7;
 .uw-ig {
-  .uw-button--wrap {
-    display:none;
-    margin-top: var(--size-6);
-    &.active {
-      display: flex;
+  &[data-nav="both"] {
+    padding-bottom: var(--size-12);
+    .flickity-prev-next-button {
+      bottom:-7rem;
     }
-    &.hide {
-      display: none;
+  }
+  &[data-nav="navigation"] {
+    padding-bottom: var(--size-10);
+    .flickity-prev-next-button {
+      bottom:-5rem;
     }
   }
   .flickity-page-dots {
@@ -36,6 +38,20 @@ $size-xlarge: 7;
       }
     }
   }
+  .flickity-prev-next-button {
+    top: inherit;
+    height: var(--size-6);
+    width: var(--size-6);
+    &.hide {
+      display: none;
+    }
+    &.next {
+      left:50%;
+    }
+    &.previous{
+      left: 44%;
+    }
+  }
   &--slider {
     //
   }
@@ -250,7 +266,7 @@ $size-xlarge: 7;
     }
     &[data-images-num="4"] {
       .uw-ig__item {
-        max-width: 24.5%;
+        max-width: 24.75%;
       }
     }
   }

src/patterns/04-components/image-gallery/_image-gallery.twig

@@ -144,10 +144,4 @@
       {% endfor %}
     {% endif %}
   </div>
-  {% if type == NULL or type == 'slider' %}
-    <div class="uw-button--wrap">
-      <button tabindex="0" class="uw-ig-button--previous"> < Prev</button>
-      <button tabindex="0" class="uw-ig-button--next">Next ></button>
-    </div>
-  {% endif %}
 </div>

src/patterns/04-components/image-gallery/image-gallery.js

@@ -43,7 +43,7 @@
                   return imagesNum;
                 }
               },
-              prevNextButtons: false,
+              prevNextButtons: navStyle === 'navigation' || navStyle === 'both',
               pageDots: navStyle === 'pagination' || navStyle === 'both',
             });
 
@@ -55,7 +55,7 @@
 
             // Hide the button wrapper if the number of dots equals imagesNum
             if (dots.length === imagesNum) {
-              $(this).find('.uw-button--wrap').addClass('hide');
+              $(this).find('.flickity-prev-next-button').addClass('hide');
               $(this).find('.flickity-page-dots').addClass('hide');
             }
             if (!dots.length) {