Fix attachments with carousel

build.sh

@@ -25,7 +25,8 @@ rm -rf $destination/assets/vendor/bootstrap/scss
 mkdir $destination/assets/vendor/slick/css
 cp $destination/assets/vendor/slick/scss/slick.min.css $destination/assets/vendor/slick/css/slick.min.css
 cp $destination/assets/vendor/slick/scss/slick-theme.min.css $destination/assets/vendor/slick/css/slick-theme.min.css
-cp $destination/assets/vendor/slick/ajax-loader.gif $destination/assets/vendor/slick/css/ajax-loader.gif
+mv $destination/assets/vendor/slick/ajax-loader.gif $destination/assets/vendor/slick/css/ajax-loader.gif
+mv $destination/assets/vendor/slick/fonts/ $destination/assets/vendor/slick/css/fonts/
 rm -rf $destination/assets/vendor/slick/scss
 
 echo "Compilation Finish!!"

src/assets/js/js.js

@@ -95,9 +95,42 @@ jQuery(document).ready(function( $ ) {
     });
 
     $('.single-item-collection--attachments').slick({
-        dots: true,
+        prevArrow: '<button type="button" data-role="none" class="single-item-collection--attachments-prev" aria-label="Previous" role="button" style="display: block;"><i class="mdi mdi-menu-left"></i></button>',
+        nextArrow: '<button type="button" data-role="none" class="single-item-collection--attachments-next" aria-label="Next" role="button" style="display: block;"><i class="mdi mdi-menu-right"></i></button>',
+        slidesToShow: 6,
+        slidesToScroll: 1,
+        autoplay: true,
+        autoplaySpeed: 2000,
+        responsive: [
+            {
+              breakpoint: 1024,
+              settings: {
+                slidesToShow: 5,
+                slidesToScroll: 1
+              }
+            },
+            {
+              breakpoint: 768,
+              settings: {
+                slidesToShow: 4,
+                slidesToScroll: 1
+              }
+            },
+            {
+              breakpoint: 576,
+              settings: {
+                slidesToShow: 2,
+                slidesToScroll: 1
+              }
+            }
+            // You can unslick at a given breakpoint now by adding:
+            // settings: "unslick"
+            // instead of a settings object
+          ]
+      });
+
+    /* $('.single-item-collection--attachments').slick({
         speed: 300,
-        variableWidth: true,
         prevArrow: '<button type="button" class="slick-prev"><i class="mdi mdi-menu-left"></i></button>',
         nextArrow: '<button type="button" class="slick-next"><i class="mdi mdi-menu-right"></i></button>',
         responsive: [
@@ -137,5 +170,5 @@ jQuery(document).ready(function( $ ) {
           // settings: "unslick"
           // instead of a settings object
         ]
-      });
+      }); */
 });

src/assets/scss/_post.scss

@@ -126,6 +126,39 @@
                         }
                     }
                 }
+                .single-item-collection--attachments {
+                    .single-item-collection--attachments-img {
+                        margin: 10px;
+                    }
+                    .single-item-collection--attachments-prev {
+                        left: -50px;
+                    }
+                    .single-item-collection--attachments-next {
+                        right: 0px;
+                        @media only screen and (min-width: 1500px) {
+                            right: -25px;
+                        }
+                    }
+                    .single-item-collection--attachments-prev, .single-item-collection--attachments-next {
+                        position: absolute;
+                        display: block;
+                        height: 33px;
+                        width: 18px;
+                        line-height: 0px;
+                        font-size: 60px;
+                        color: #298596;
+                        cursor: pointer;
+                        background: transparent;
+                        top: 50%;
+                        -webkit-transform: translate(0, -50%);
+                        -ms-transform: translate(0, -50%);
+                        transform: translate(0, -50%);
+                        padding: 0;
+                        border: none;
+                        outline: none;
+                    }
+
+                }
                 .single-item-collection--information{
                     .card{
                         .item-card--thumbnail{

src/tainacan/single-items.php

@@ -34,6 +34,15 @@
                             </section>
                         </article>
                     </div>
+                    <?php
+                        $images = get_posts( array (
+                            'post_parent' => get_the_ID(),
+                            'post_type' => 'attachment',
+                            'post_per_page' => -1,
+                            'exclude' => get_post_thumbnail_id( get_the_ID() )
+                        ));
+                        if ( !empty($images) ) {
+                    ?>
                     <div class="tainacan-title my-5">
                         <div class="border-bottom border-silver tainacan-title-page" style="border-width: 1px !important;">
                         </div>
@@ -44,24 +53,15 @@
                             <section class="tainacan-content single-item-collection margin-two-column">
                                 <div class="single-item-collection--attachments">
                                     <?php
-                                        $images = get_posts( array (
+                                        foreach ( $images as $attachment ) {
-                                            'post_parent' => get_the_ID(),
+                                            echo '<div class="single-item-collection--attachments-img">' . wp_get_attachment_image( $attachment->ID, 'tainacan-theme-list-post' ) . '</div>';
-                                            'post_type' => 'attachment',
-                                            'post_per_page' => -1,
-                                            'exclude' => get_post_thumbnail_id( get_the_ID() )
-                                        ));
-                                        if ( empty($images) ) {
-                                            echo 'no attachments here';
-                                        } else {
-                                            foreach ( $images as $attachment ) {
-                                                echo '<div class="single-item-collection--attachments-img">' . wp_get_attachment_image( $attachment->ID, 'medium' ) . '</div>';
-                                            }
                                         }
                                     ?>
                                 </div>
                             </section>
                         </article>
                     </div>
+                    <?php } ?>
                     <div class="tainacan-title my-5">
                         <div class="border-bottom border-silver tainacan-title-page" style="border-width: 1px !important;">
                         </div>