Vue.jsで画像のカルーセルをつくる際の画像とスライド方向の指定

Vue.jsを読んだ上で、画像のカルーセルをつくりたいです。
以下のソースで動いているのですが、さらに以下の仕様を実現したいと思っています。

①カルーセルで表示するのは「画像1」といったテキストではなく、画像ファイルにする。
②現状「＜」「＞」どちらを押しても、画像が出て消えていく方向は常に右から左だが、
「＜」押下の際は右から左でいいとしても、「＞」押下の際は左から右にする。

この仕様を満たす書き換えソースは、例えばどのようなものになるでしょうか。
①と②、どちらか一方だけに対する答えでも構いませんので、思いつくかたはお教えいただけるとありがたく思います。

JavaScriptも、そのフレームワークであるVue.jsもかなり理解が拙く、大変初歩的な内容の質問です。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<script type="text/javascript" src="https://vuejs.org/js/vue.js"></script>  
5<style type="text/css">
6.slide-enter-active, .slide-leave-active {
7  transition: transform .5s
8}
9.slide-enter {
10  transform: translateX(300px)
11}
12.slide-leave-active {
13  transform: translateX(-300px);
14}
15
16p {
17  position: absolute;
18  margin: 0;
19  font-size: 3em;
20}
21</style>
22</head>
23
24<body>
25  <div id="app">
26  <button @click="product--">＜</button>
27  <button @click="product++">＞</button>
28  <transition name="slide">
29    <p :key="products[product%5]">{{products[product%5]}}</p>
30  </transition>
31</div>
32  <script>
33new Vue({
34    el: '#app',
35  data: {
36    product: 0,
37    products: ["画像１",'画像２','画像３','画像４','画像５']
38  }
39})
40</script>
41</body>
42</html>