Propper style for attachments carousel.

functions.php

@@ -190,6 +190,7 @@ function blocksy_tainacan_swiper_scripts() {
 		$post_type = get_post_type();
 
 		if ( in_array($post_type, $collections_post_types) ) {
+			wp_enqueue_style( 'swiper', 'https://unpkg.com/swiper/swiper-bundle.min.css', array(), BLOCKSY_TAINACAN_VERSION );
 			wp_enqueue_script( 'swiper', 'https://unpkg.com/swiper/swiper-bundle.min.js', array(), BLOCKSY_TAINACAN_VERSION, true );	
 			wp_enqueue_script( 'blocksy-tainacan-scripts', get_stylesheet_directory_uri() . '/js/attachments-carousel.js', ['swiper'], BLOCKSY_TAINACAN_VERSION, true );
 		}

js/attachments-carousel.js

@@ -1,10 +1,6 @@
 const attachmentsThumbsSwiper = new Swiper('.swiper-container-thumbs', {
   spaceBetween: 10,
-  slidesPerView: 6,
+  slidesPerView: 7,
-  freeMode: true,
-  watchSlidesVisibility: true,
-  watchSlidesProgress: true,
-  watchOverflow: true,
   navigation: {
     nextEl: '.swiper-button-next',
     prevEl: '.swiper-button-prev',

sass/tainacan-item-single.scss

@@ -132,23 +132,20 @@
     .single-item-collection--gallery-items,
     .single-item-collection--attachments {
         .single-item-collection--attachments-file {
-            margin: 10px;
             text-align: center;
-            display: inline-block;
             vertical-align: top;
             cursor: pointer;
             word-break: break-all;
             font-size: 0.875em;
-            padding: 0 14px;
+            padding: 0 6px;
             
             @media only screen and (max-width: 380px) {
                 margin: 10px 0;
             }
 
             img {
-                width: 125px;
+                width: 130px;
-                height: 125px;
+                height: 130px;
-                display: inline-block;
                 object-fit: cover;
                 &:focus {
                     outline: none;
@@ -156,9 +153,7 @@
             }
             a {
                 width: 100%;
-                max-width: 125px;
+                max-width: 130px;
-                margin: 0 auto;
-                display: inline-block;
                 font-size: 0.875rem; 
                 text-align: center;
                 word-break: break-all;
@@ -177,9 +172,6 @@
                 background-color: #dbdbdb;
                 object-fit: contain;
             }
-            .item-card--thumbnail {
-                margin: 0 0 4px 0 !important;
-            }
         }
     }
     .s-item-collection--metadata {
@@ -266,4 +258,37 @@
             border-left: 1px solid #f2f2f2;
         }
     }
+
+    --swiper-theme-color: var(--paletteColor1, #3eaf7c);
+    --swiper-navigation-color: var(--paletteColor1, #3eaf7c);
+    .swiper-container {
+        .swiper-button-disabled {
+            display: none;
+        }
+        .swiper-button-next,
+        .swiper-button-prev {
+            top: calc(130px/2);
+
+            &:after {
+                filter: drop-shadow(0px 0px 1px white);
+            }
+        }  
+        .swiper-button-prev {
+            left: -30px;
+            transition: left 0.3s ease;
+        }
+        .swiper-button-next {
+            right: -30px;
+            transition: right 0.3s ease;
+        }
+        &:hover {
+            .swiper-button-prev {
+                left: 10px;
+            }
+            .swiper-button-next {
+                right: 10px;
+            }
+        }
+
+    } 
 }

style.css

@@ -300,6 +300,11 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
 }
 
 /* Single Item Page */
+.single-item-data-section {
+  --swiper-theme-color: var(--paletteColor1, #3eaf7c);
+  --swiper-navigation-color: var(--paletteColor1, #3eaf7c);
+}
+
 .single-item-data-section h1 {
   --fontSize: 30px;
 }
@@ -443,14 +448,12 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
 
 .single-item-data-section .single-item-collection--gallery-items .single-item-collection--attachments-file,
 .single-item-data-section .single-item-collection--attachments .single-item-collection--attachments-file {
-  margin: 10px;
   text-align: center;
-  display: inline-block;
   vertical-align: top;
   cursor: pointer;
   word-break: break-all;
   font-size: 0.875em;
-  padding: 0 14px;
+  padding: 0 6px;
 }
 
 @media only screen and (max-width: 380px) {
@@ -462,9 +465,8 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
 
 .single-item-data-section .single-item-collection--gallery-items .single-item-collection--attachments-file img,
 .single-item-data-section .single-item-collection--attachments .single-item-collection--attachments-file img {
-  width: 125px;
+  width: 130px;
-  height: 125px;
+  height: 130px;
-  display: inline-block;
   object-fit: cover;
 }
 
@@ -476,9 +478,7 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
 .single-item-data-section .single-item-collection--gallery-items .single-item-collection--attachments-file a,
 .single-item-data-section .single-item-collection--attachments .single-item-collection--attachments-file a {
   width: 100%;
-  max-width: 125px;
+  max-width: 130px;
-  margin: 0 auto;
-  display: inline-block;
   font-size: 0.875rem;
   text-align: center;
   word-break: break-all;
@@ -504,11 +504,6 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
   object-fit: contain;
 }
 
-.single-item-data-section .single-item-collection--gallery-items .single-item-collection--attachments-file .item-card--thumbnail,
-.single-item-data-section .single-item-collection--attachments .single-item-collection--attachments-file .item-card--thumbnail {
-  margin: 0 0 4px 0 !important;
-}
-
 .single-item-data-section .s-item-collection--metadata {
   height: 100%;
 }
@@ -607,4 +602,36 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
   border-left: 1px solid #f2f2f2;
 }
 
+.single-item-data-section .swiper-container .swiper-button-disabled {
+  display: none;
+}
+
+.single-item-data-section .swiper-container .swiper-button-next,
+.single-item-data-section .swiper-container .swiper-button-prev {
+  top: calc(130px/2);
+}
+
+.single-item-data-section .swiper-container .swiper-button-next:after,
+.single-item-data-section .swiper-container .swiper-button-prev:after {
+  filter: drop-shadow(0px 0px 1px white);
+}
+
+.single-item-data-section .swiper-container .swiper-button-prev {
+  left: -30px;
+  transition: left 0.3s ease;
+}
+
+.single-item-data-section .swiper-container .swiper-button-next {
+  right: -30px;
+  transition: right 0.3s ease;
+}
+
+.single-item-data-section .swiper-container:hover .swiper-button-prev {
+  left: 10px;
+}
+
+.single-item-data-section .swiper-container:hover .swiper-button-next {
+  right: 10px;
+}
+
 /*# sourceMappingURL=style.css.map */

template-parts/single-items-attachments.php

@@ -85,7 +85,7 @@
                     </div>
                 <?php endif; ?>
             <?php else : ?>
-                <div class="single-item-collection--attachments swiper-container-thumbs">
+                <div class="single-item-collection--attachments swiper-container-thumbs swiper-container">
                     <div class="swiper-wrapper">
                         <?php foreach ( $attachments as $attachment ) { ?>
                             <?php
@@ -109,10 +109,10 @@
                                 </a>
                             </div>
                         <?php } ?>
-
-                        <div class="swiper-button-prev"></div>
-                        <div class="swiper-button-next"></div>
                     </div>
+
+                    <div class="swiper-button-prev"></div>
+                    <div class="swiper-button-next"></div>
                 </div>
             <?php endif; ?>
         </section>