add carousel component

package.json

@@ -15,11 +15,13 @@
     "import:assets": "npm-run-all import:people-json import:people-public-json import:videos-json import:youtube-json import:playlist-json import:css",
     "build:lib": "vue-cli-service build --target lib ./src/sections/index.js",
     "export:components": "cp dist/ted-x-components.umd.min.js ../tedx-auckland-site/src/assets/js/",
+    "export:hoopercss": "cp node_modules/hooper/dist/hooper.css ../tedx-auckland-site/src/assets/css/",
     "//": " && cp dist/ted-x-components.css ../tedx-auckland-site/src/assets/css/",
     "build-and-export": "npm-run-all build:lib export:components"
   },
   "dependencies": {
     "axios": "^0.18.1",
+    "hooper": "^0.3.4",
     "lodash": "^4.17.19",
     "marked": "^1.1.1",
     "vue": "^2.6.11",

src/App.vue

@@ -4,7 +4,8 @@
       <router-link to="/speakers-expanding-preview">Speakers Expanding Preview</router-link> |
       <router-link to="/videos-expanding-preview">Videos Expanding Preview</router-link> |
       <router-link to="/videos-playlist">Videos Playlist</router-link> |
-      <router-link to="/animated-image">Animated Image</router-link>
+      <router-link to="/animated-image">Animated Image</router-link> |
+      <router-link to="/carousel">Carousel</router-link>
     </div>
     <router-view/>
   </div>

src/components/Carousel.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="carousel">
+    <hooper infiniteScroll autoPlay playSpeed="5000" transition="1000" :wheelControl="false">
+      <slide v-for="image in images" :key="image">
+        <img class="carousel__img" :src="image">
+      </slide>
+      <hooper-navigation slot="hooper-addons"></hooper-navigation>
+      <!-- <hooper-progress slot="hooper-addons"></hooper-progress> -->
+      <hooper-pagination slot="hooper-addons"></hooper-pagination>
+    </hooper>
+  </div>
+</template>
+
+<script>
+import {
+  Hooper,
+  Slide,
+  Navigation as HooperNavigation,
+  Pagination as HooperPagination
+} from 'hooper'
+import 'hooper/dist/hooper.css'
+
+export default {
+  name: "carousel",
+  components: {
+    Hooper,
+    Slide,
+    HooperNavigation,
+    HooperPagination
+    },
+  props: {
+    images: {
+      type: Array,
+    }
+  },
+
+  data() {
+    return {
+    }
+  },
+
+  methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+  .hooper {
+    height: unset;
+  }
+  img {
+    width: 100%;
+  }
+</style>

src/router.js

@@ -4,6 +4,7 @@ import SpeakersExpandingPreviewScaffold from './views/SpeakersExpandingPreviewSc
 import VideosPlaylistScaffold from './views/VideosPlaylistScaffold'
 import VideosExpandingPreviewScaffold from './views/VideosExpandingPreviewScaffold'
 import AnimatedImageScaffold from './views/AnimatedImageScaffold'
+import CarouselScaffold from './views/CarouselScaffold'
 
 Vue.use(Router)
 
@@ -31,5 +32,10 @@ export default new Router({
       name: 'animatedImageScaffold',
       component: AnimatedImageScaffold
     },
+    {
+      path: '/carousel',
+      name: 'carouselScaffold',
+      component: CarouselScaffold
+    },
   ]
 })

src/sections/index.js

@@ -1,12 +1,14 @@
 import Vue from 'vue'
 import Speakers from './Speakers'
 import AnimatedImage from '../components/AnimatedImage'
+import Carousel from '../components/Carousel'
 import Videos from './Videos'
 import VideosPlaylist from './VideosPlaylist'
 
 const Components = {
   Speakers,
   AnimatedImage,
+  Carousel,
   Videos,
   VideosPlaylist,
 };

src/views/CarouselScaffold.vue

@@ -0,0 +1,57 @@
+<template>
+  <div id="app">
+
+  <section>
+    <Carousel :images="imagePaths" />
+  </section>
+
+  </div>
+</template>
+
+<script>
+import Carousel from '@/components/Carousel.vue'
+
+var imagePaths = [
+  "assets/1-THEME DESC - COVER150.png",
+  "assets/2-MIND MAP150.png",
+  "assets/3-INTRO150.png",
+]
+
+export default {
+  name: 'app',
+
+  components: {
+    Carousel,
+  },
+
+  data() {
+    return {
+      imagePaths,
+      baseUrl: process.env.BASE_URL
+    }
+  },
+
+  computed: {
+    images() {
+      return this.imagePaths.map( (p) => {
+        // return this.baseUrl + p
+        return '/images/animation/' + p
+      })
+    }
+  }
+}
+
+
+
+</script>
+
+<style scoped>
+  .off-piste__image {
+    width: 500px;
+    height: auto;
+  }
+  section {
+    width: 512px;
+    margin: 3rem auto;
+  }
+</style>