init slider

src/assets/scss/main.scss

@@ -9,7 +9,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
 
 blockquote {
-  @apply border-l;
+  // @apply border-l;
   @apply border-l-4;
   @apply border-l-blue-500;
   @apply pl-4;
@@ -48,7 +48,7 @@ body {
 }
 
 pre {
-  @apply border-l;
+  // @apply border-l;
   @apply border-l-2;
   @apply border-l-gray-500;
   @apply pl-4;
@@ -117,7 +117,7 @@ ul {
 }
 
 .flex-post {
-  @apply border-b;
+  // @apply border-b;
   @apply border-b-gray-300;
   @apply flex-col;
   @apply w-full;

src/components/custom/Slider.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="my-20">
+    <div v-if="main" class="text-center">
+      <h2 class="text-7xl">{{ main.title }}</h2>
+      <h2 v-if="main.subtitle" class="text-7xl">{{ main.subtitle }}</h2>
+      <div
+        class="my-10 max-w-2xl text-xl mx-auto text-gray-600 sm:mt-4"
+        v-html="main.content"
+      ></div>
+    </div>
+    <VueSlickCarousel v-bind="settings">
+      <div
+        class="px-2"
+        v-for="(slide, index) in slides"
+        :key="`${slide}-${index}`"
+      >
+        <img :src="img(slide.img)" class="h-100" />
+      </div>
+    </VueSlickCarousel>
+  </div>
+</template>
+
+<script>
+import "vue-slick-carousel/dist/vue-slick-carousel.css";
+export default {
+  props: ["main", "slides"],
+  data() {
+    return {
+      settings: {
+        arrows: true,
+        slidesToShow: 4,
+        slidesToScroll: 4,
+        responsive: [
+          {
+            breakpoint: 1024,
+            settings: {
+              slidesToShow: 3,
+              slidesToScroll: 3,
+              infinite: true,
+              dots: true,
+              arrows: false,
+            },
+          },
+          {
+            breakpoint: 600,
+            settings: {
+              slidesToShow: 2,
+              slidesToScroll: 2,
+              initialSlide: 2,
+              dots: true,
+              arrows: false,
+            },
+          },
+          {
+            breakpoint: 480,
+            settings: {
+              slidesToShow: 1,
+              slidesToScroll: 1,
+              dots: true,
+              arrows: false,
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    img(slide) {
+      if (!slide) return "";
+      if (slide.src) return slide.src;
+      return slide;
+    },
+  },
+};
+</script>
+
+<style>
+.slick-prev:before,
+.slick-next:before {
+  color: black !important;
+  z-index: 999999999;
+}
+</style>
+

src/main.js

@@ -13,6 +13,9 @@ import { fab } from '@fortawesome/free-brands-svg-icons'
 import '@fortawesome/fontawesome-svg-core/styles.css';
 import shareIt from 'vue-share-it';
 
+import VueSlickCarousel from "vue-slick-carousel";
+import "vue-slick-carousel/dist/vue-slick-carousel-theme.css";
+
 require("gridsome-plugin-remark-prismjs-all/themes/night-owl.css");
 require("prismjs/themes/prism-solarizedlight.css");
 
@@ -20,10 +23,11 @@ config.autoAddCss = false;
 library.add(fas);
 library.add(fab);
 
-export default function(Vue, { router, head, isClient }) {
+export default function (Vue, { router, head, isClient }) {
     // Set default layout as a global component
     Vue.component('Layout', DefaultLayout)
     Vue.component('font-awesome', FontAwesomeIcon)
+    Vue.component('VueSlickCarousel', VueSlickCarousel)
     Vue.use(VTooltip, {
         defaultPlacement: 'top-end',
         defaultClass: 'bg-black text-xs px-2 leading-normal py-1 rounded absolute text-gray-400 max-w-xs mb-1'

src/templates/MarkdownPage.vue

@@ -72,7 +72,7 @@
       class="mx-auto mt-10"
       :src="$page.markdownPage.solution_image.src"
     /> -->
-    <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
+    <div class="container sm:pxi-0 mx-auto py-5 overflow-visible">
       <CallToAction
         :id="$page.markdownPage.id"
         v-if="
@@ -109,6 +109,12 @@
         :id="$page.markdownPage.id"
         :card="$page.markdownPage.card"
       />
+
+      <Slider
+        v-if="$page.markdownPage.carousel"
+        :slides="$page.markdownPage.carousel"
+        :main="$page.markdownPage.sliderMain"
+      />
       <Partenerships
         v-if="
           $page.markdownPage.partnerships &&
@@ -435,6 +441,18 @@
       image
      }
 
+     carousel {
+        id
+        img
+      }
+
+      sliderMain {
+        id
+        title
+        subtitle
+        content
+      }
+
      card{
        id
        img
@@ -480,7 +498,7 @@ import AppListItem from "~/components/AppListItem.vue";
 import Partenerships from "~/components/marketing/sections/team-sections/grid_with_large_round_images.vue";
 import CenteredAccordion from "~/components/marketing/sections/faq-sections/CenteredAccordion.vue";
 import CustomCTA from "~/components/custom/sections/CustomCTA.vue";
-
+import Slider from "~/components/custom/Slider.vue";
 export default {
   components: {
     NewCard,
@@ -504,6 +522,7 @@ export default {
     Partenerships,
     CenteredAccordion,
     CustomCTA,
+    Slider,
   },
   computed: {
     getImg() {