javascriptでスマホでの画像スワイプ

Question

前提・実現したいこと

現在HTMLでWEBサイトを制作している初心者です。
スマホのスワイプ対応をさせようと試みているのですがうまくいきません。
スマホで画像一枚一枚スワイプできるようなコードを書きたいです、、
有識者の方の知恵をお借りしたいです????‍♀️。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

  <div class="box">

  <img id="menu1" src="menu/メニュー1.jpg" width="450" height="600">
<p>  
<span>
<input type="button" value="戻る" onclick="go_back()">
</span>
<a>  
<input type="button" value="進む" onclick="go_forward()"> 
</a>
</p>
  <script>
                    var menu1_src = new Array("menu/メニュー1.jpg","menu/メニュー                   2.jpg","menu/メニュー3.jpg","menu/メニュー4.jpg","menu/メニュー5.jpg",
                    "menu/メニュー6.jpg","menu/メニュー7.jpg","menu/メニュー8.jpg"
                    );
                    var num = 0;

                    function go_forward(){
                        if (num == 7) {
                            num = 0;
                        }
                        else {
                            num ++;
                        }
                        document.getElementById("menu1").src=menu1_src[num];
                    }

                    function go_back(){
                        if (num == 0) {
                            num = 7;
                        }
                        else {
                            num --;
                        }
                        document.getElementById("menu1").src=menu1_src[num];
                    }
                    </script>
</div>

該当のソースコード

var flkty = new Flickity( '.box', {
  // options
});

試したこと

上記のjavascript、Flickityで試してみたのですがスワイプはできませんでした。

Comments

[naUc]

可能であれば、それぞれのコードで発生するエラー内容を共有ください。何故できないのかを調べたほうが良いかと思います。
また、スワイプさせるjsライブラリは探せば他にもありますよ。