Merge branch 'main' into bug/model-image-2zoom

hlxsites · Dec 5, 2023 · 3aeca83 · 3aeca83
2 parents ec74da8 + 8edcba1
commit 3aeca83
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/blocks/imageslider/imageslider.css b/blocks/imageslider/imageslider.css
@@ -79,7 +79,7 @@ main div.imageslider-wrapper {
    main .imageslider-nav-button {
      z-index: 99;
      min-width: unset;
-     padding: 4px;
+     padding: 6px 4px 4px;
      border-radius: 50%;
      position: absolute;
      top: 88%;
@@ -92,13 +92,16 @@ main div.imageslider-wrapper {
      border: 1.5px solid #adb3b7;  /* default - same as .products */
      background-color: #adb3b7;      /* default - same as .products */
      font-weight: bolder;
-     height: 20px;
+     height: 15px;
+     width: 17px;
+     text-decoration: none;
+     transition: 0.2s all ease-in-out;
+     cursor: pointer;
    }
 
    main .imageslider-nav-button:hover {
      z-index: 99;
      min-width: unset;
-     padding: 4px;
      border-radius: 50%;
      position: absolute;
      top: 88%;
@@ -107,11 +110,12 @@ main div.imageslider-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
-     color: #fff;               /* default - same as .products */
-     border: 1.5px solid #a3a3a3;  /* default - same as .products */
-     background-color: #a3a3a3;      /* default - same as .products */
+     color: #fff;
+     border: 1.5px solid #a3a3a3;
+     background-color: #a3a3a3;
      font-weight: bolder;
-     height: 20px;
+     text-decoration: none;
+     transition: 0.2s all ease-in-out;
    }
 
    main .imageslider-nav-button.disabled {

diff --git a/blocks/imageslider/imageslider.js b/blocks/imageslider/imageslider.js
@@ -276,7 +276,7 @@ class ImageSlider {
   * Create left and right arrow navigation buttons
   */
   createNavButtons(parentElement) {
-    const buttonLeft = document.createElement('button');
+    const buttonLeft = document.createElement('a');
     buttonLeft.classList.add('imageslider-nav-left');
     buttonLeft.classList.add('imageslider-nav-button');
     buttonLeft.ariaLabel = 'Scroll to previous item';
@@ -290,7 +290,7 @@ class ImageSlider {
       buttonLeft.classList.add('disabled');
     }
 
-    const buttonRight = document.createElement('button');
+    const buttonRight = document.createElement('a');
     buttonRight.classList.add('imageslider-nav-right');
     buttonRight.classList.add('imageslider-nav-button');
     buttonRight.ariaLabel = 'Scroll to next item';
@@ -487,7 +487,7 @@ class ImageSlider {
       ...[...this.block.classList].filter((item, idx) => idx !== 0 && item !== 'block'),
     );
 
-    this.block.parentElement.classList.add('outer');
+    // this.block.parentElement.classList.add('outer');
     this.block.innerHTML = '';
     const mainContainer = document.createElement('div');
     mainContainer.classList.add('imageslider-main');