[ADD] article carousel

main/styleguide/source/_patterns/organisms/articles-section.mustache

@@ -5,10 +5,8 @@
       Aktuality z paluby
     </h2>
     {{> molecules-main-article-preview }}
-    <div class="flex w-11/12">
     <div class="__js-root">
       <ui-article-carousel></ui-article-carousel>
     </div>
   </div>
 </div>
-</div>

main/styleguide/source/css/molecules/carousels.pcss

+.slick-slider .slick-arrow {
+  font-size: 0;
+  position: absolute;
+  top: -.7rem;
+  z-index: 10;
+  &:before, &:after {
+    border-right: 2px solid white;
+    border-bottom: 2px solid white;
+    content: '';
+    height: .8rem;
+    position: absolute;
+    width: .8rem;
+    @screen lg {
+      height: 1rem;
+      width: 1rem;
+    }
+  }
+  &.slick-next {
+    transform: rotate(-45deg);
+  }
+
+  &.slick-prev {
+    transform: rotate(135deg);
+  }
+}
+
 .header-carousel {
   display: block;
   margin: 0 auto;
@@ -114,3 +140,22 @@
     }
   }
 }
+
+.article-carousel {
+  .slick-arrow {
+    right: 10%;
+    @screen lg {
+      right: 0;
+    }
+
+    &:before, &:after {
+      border-color: black;
+    }
+
+    &.slick-disabled {
+      &:before, &:after {
+        border-color: #B3B3B3;
+      }
+    }
+  }
+}

main/styleguide/source/js/components/articles/ArticleCarousel.vue

 <template>
-  <div>
-    <vue-slick-carousel v-bind="settings">
+  <vue-slick-carousel v-bind="settings" class="article-carousel">
     <div>
       <div class="flex max-w-md items-start">
         <img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt=""
-               class="w-16 mr-4">
+             class="w-16 xl:w-36 mr-4">
         <div class="flex flex-col justify-between items-start">
-            <span class="text-green-500">23.2.2022</span>
-            <h4 class="uppercase">
+          <span class="text-green-500 mb-2">23.2.2022</span>
+          <h4 class="uppercase mb-2">
             Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární,
             ale skutečná. Jak nenaletět internetovým šmejdům?
           </h4>
+          <a href="" class="btn btn__slide__wrap ">
+            <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span>
+            <span class="btn text-sm bg-white  w-32 lg:text-base">Zjistit více3</span>
+          </a>
         </div>
       </div>
     </div>
     <div>
       <div class="flex max-w-md items-start">
         <img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt=""
-               class="w-16 mr-4">
+             class="w-16 xl:w-36 mr-4">
         <div class="flex flex-col justify-between items-start">
-            <span class="text-green-500">23.2.2022</span>
-            <h4 class="uppercase">
+          <span class="text-green-500 mb-2">23.2.2022</span>
+          <h4 class="uppercase mb-2">
             Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární,
             ale skutečná. Jak nenaletět internetovým šmejdům?
           </h4>
+          <a href="" class="btn btn__slide__wrap ">
+            <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span>
+            <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více3</span>
+          </a>
         </div>
       </div>
     </div>
     <div>
       <div class="flex max-w-md items-start">
         <img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt=""
-               class="w-16 mr-4">
+             class="w-16 xl:w-36 mr-4">
         <div class="flex flex-col justify-between items-start">
-            <span class="text-green-500">23.2.2022</span>
-            <h4 class="uppercase">
+          <span class="text-green-500 mb-2">23.2.2022</span>
+          <h4 class="uppercase mb-2">
             Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární,
             ale skutečná. Jak nenaletět internetovým šmejdům?
           </h4>
+          <a href="" class="btn btn__slide__wrap ">
+            <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span>
+            <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více3</span>
+          </a>
         </div>
       </div>
     </div>
   </vue-slick-carousel>
-  </div>
 </template>
 
 <script>
@@ -54,15 +64,13 @@ export default {
     settings: {
       "dots": false,
       "infinite": false,
-      "speed": 500,
       "slidesToShow": 3,
       "slidesToScroll": 1,
       "responsive": [
         {
           "breakpoint": 1200,
           "settings": {
-            "slidesToShow": 1,
-            "slidesToScroll": 1
+            "slidesToShow": 1
           }
         }
       ]