team.vue

<template>
  <LandingPage>
    <div class="flex justify-between">
      <SubMenu />
      <g-image src="~/assets/images/team.jpg" alt="" class="" />
    </div>

    <section class="flex flex-col pr-6 mb-16">
      <h1 class="">Team</h1>
      <div class="flex flex-wrap justify-between w-1/2">
        <p class="markdown" v-html="content"></p>
      </div>
    </section>

    <section class="w-full mb-4 pr-16">
      <ClientOnly>
        <hooper
          class="mb-4 outline-none"
          group="group1"
          :itemsToShow="5"
          :infiniteScroll="false"
          :mouseDrag="false"
          :wheelControl="false"
          :trimWhiteSpace="true"
        >
          <slide
            v-for="(member, index) in teamMembers"
            :key="member.id"
            class=" cursor-pointer"
          >
            <g-image :src="image(member.node.photo)" @click="slideTo(index)" />
          </slide>
        </hooper>

        <hooper
          group="group1"
          class="h-auto justify-center outline-none"
          ref="carousel"
          :infiniteScroll="false"
          :mouseDrag="false"
          :wheelControl="false"
          :trimWhiteSpace="true"
        >
          <slide
            v-for="member in teamMembers"
            :key="member.id"
            class="flex justify-center relative"
          >
            <g-image :src="image(member.node.photo)" class="w-auto h-156" />
            <div
              class="absolute text-lg bg-black bg-opacity-50 px-16 py-4 bottom-0"
            >
              <div class="mb-2 font-bold">
                {{ member.node.name }}
              </div>
              <div class="mb-2 font-source-serif-pro">
                {{ member.node.position }}
              </div>
              <div>
                {{ member.node.bio }}
              </div>
            </div>
          </slide>
        </hooper>
      </ClientOnly>
    </section>
  </LandingPage>
</template>

<script>
import LandingPage from "@/layouts/LandingPage";
import SubMenu from "@/components/SubMenu.vue";

export default {
  metaInfo: {
    title: "Team ",
  },
  components: {
    Hooper: () => import ('hooper')
    .then(m => m.Hooper)
    .catch(),
    LandingPage,
    Slide: () => import ('hooper')
    .then(m => m.Slide)
    .catch(),
    SubMenu,
  },
  computed: {
    content() {
      const contentMd = this.$static.strapiPage.Content;
      return new this.$showdown.Converter().makeHtml(contentMd);
    },
    teamMembers() {
      return this.$page.teamMembers.edges;
    },
  },
  methods: {
    slideTo(index) {
      this.$refs.carousel.slideTo(index);
    },
    image(data) {
      return `${process.env.GRIDSOME_STRAPI_URL}${data.url}`;
    },
  },
};
</script>

<style src="hooper/dist/hooper.css"></style>
<style scoped>
.hooper-slide {
  @apply border-solid border-2 border-black;
}
</style>