title: Adding a simple left/right swipe gesture
body: <p><strong>I need to add a simple left/right swipe gesture</strong> so that the 'selected' image cycles when swiped on mobile, similar to clicking the buttons in the hero component, also similar to pressing the left/right arrow keys on a keyboard</p>
  <p>I don't have the most experience with JavaScript so if anyone could tell me what exactly to write and where so that I can completely wrap up this project.</p>
  <p>Here is a demo: <a href="http://nufaith.ca/justinatkins/" rel="noreferrer">http://nufaith.ca/justinatkins/</a></p>
  <p><strong>Code:</strong></p>
  <pre><code>Vue.component('hero-bg', {
    template: `
      &lt;div class=&quot;hero-bg&quot;&gt;
        &lt;div class=&quot;hero&quot;&gt;
          &lt;img id=&quot;pushed&quot; :src=&quot;selected&quot;/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      `,
    props: ['selected']
  });
  
  Vue.component('hero-bg-empty', {
    template: `
      &lt;div class=&quot;hero-bg&quot;&gt;
        &lt;div class=&quot;hero&quot;&gt;
        &lt;span style=&quot;display:block;height:100px;&quot;&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      `
  });
  
  Vue.component('hero', {
    template: `
      &lt;div&gt;
        &lt;topbar v-if=&quot;!gridEnabled&quot;&gt;&lt;/topbar&gt;
        &lt;topbar2 v-if=&quot;gridEnabled&quot;&gt;&lt;/topbar2&gt;
        &lt;hero-bg :selected=&quot;selectedItem.img&quot; v-if=&quot;!gridEnabled&quot;&gt;&lt;/hero-bg&gt;
        &lt;hero-bg-empty v-if=&quot;gridEnabled&quot;&gt;&lt;/hero-bg-empty&gt;
        &lt;div class=&quot;hero-container&quot; v-if=&quot;!gridEnabled&quot;&gt;
          &lt;div class=&quot;hero&quot;&gt;
            &lt;img :src=&quot;selectedItem.img&quot; v-if=&quot;thing&quot; alt=&quot;&quot;/&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;hero-desc&quot;&gt;
            &lt;button class=&quot;control left&quot; @click=&quot;previous&quot;&gt;
              &lt;i class=&quot;zmdi zmdi-chevron-left&quot;&gt;&lt;/i&gt;
            &lt;/button&gt;
            &lt;span class=&quot;hero-desc-title&quot; v-html=&quot;title&quot;&gt;&lt;/span&gt;
            &lt;button class=&quot;control right&quot; @click=&quot;next&quot;&gt;
              &lt;i class=&quot;zmdi zmdi-chevron-right&quot;&gt;&lt;/i&gt;
            &lt;/button&gt;
            &lt;br/&gt;
            &lt;button class=&quot;view-all-button&quot; @click=&quot;enableGrid&quot;&gt;OVERVIEW&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      `,
    data() {
      return {
        gridEnabled: false,
        selected: 0,
        thing: true
      };
    },
    computed: {
      selectedItem() {
        return info[this.selected];
      },
      title() {
        const comma = this.selectedItem.title.indexOf(',');
        const len = this.selectedItem.title.length;
        const strBeginning = this.selectedItem.title.substring(comma, 0);
        const strEnd = this.selectedItem.title.substring(comma, len);
        if (this.selectedItem.title.includes(',')) {
          return `&lt;span&gt;${strBeginning}&lt;span class=&quot;font-regular font-muted&quot;&gt;${strEnd}&lt;/span&gt;&lt;/span&gt;`;
        }
        return this.selectedItem.title;
      },
      maxImages() {
        return info.length - 1;
      }
    },
    created() {
      window.addEventListener('keydown', e =&gt; {
        if (e.keyCode === 37) {
          this.previous();
          return;
        }
  
        if (e.keyCode === 39) {
          this.next();
          return;
        }
      });
      Event.$on('updateImg', index =&gt; {
        this.selected = index;
        this.gridEnabled = !this.gridEnabled;
      });
    },
    methods: {
      next() {
        this.selected === this.maxImages ? (this.selected = 0) : (this.selected += 1);
      },
      previous() {
        this.selected === 0 ? (this.selected = this.maxImages) : (this.selected -= 1);
      },
      enableGrid() {
        this.gridEnabled = !this.gridEnabled;
        window.scroll(0, 0);
        Event.$emit('enableGrid');
      }
    }
  });
  </code></pre>