スマホ用・ボタンクリックでdiv内が一定量水平スクロールする場合の記述

スマートフォン用の動作で、横に長い画像のブラウザ幅に収まらない部分を、
ボタンクリックをきっかけとした水平スクロールによって表示できるようにしたいです。

html
1    <div class="scroll-box">
2      <div class="scroll-img"> <img src="images/scroll-img.png" alt=""> </div>
3      <ul class="control-btn-box">
4        <li class="control-btn prev"><img src="images/btn-prev.png" alt="prev"></li>
5        <li class="control-btn next"><img src="images/btn-next.png" alt="next"></li>
6      </ul>
7    </div>

css
1.scroll-box {
2	position: relative;
3	overflow: hidden;
4	width: 100%;
5	height: calc((300/ 800) * 100 *1vw);
6}
7.scroll-box .scroll-img {
8	width: auto;
9	height: 100%;
10	margin-left: 0;
11	transition: margin-left 2s ease-in-out;
12}
13.scroll-box .scroll-img.active {
14	margin-left: calc((1200/ 800) * 100 *-1vw);
15}
16.scroll-box .scroll-img img {
17	width: auto;
18	height: 100%;
19}
20.scroll-box .control-btn {
21	position: absolute;
22	top: 50%;
23	width: calc((50/ 800) * 100 *1vw);
24}
25.scroll-box .control-btn.prev {
26	left: 0;
27}
28.scroll-box .control-btn.next {
29	right: 0;
30}

読み込み時.scroll-imgに.activeを付与して、
はじめに左端から右端まで画像が横スクロールするアニメーションを追加しています。

jQuery
1$(document).ready(function () {
2      $(".scroll-img").delay(1000).queue(function () {
3        $(this).addClass("active");
4      });
5});

また、下記の仕様にしたいと思っています。
・スマートフォン用動作であるため、スクロール量は画面幅によって可変する。
・右端/左端まで移動した場合は、右矢印/左矢印をそれぞれフェードアウトさせ、
ボタンクリックによって再度右端/左端に移動できるようになった場合は右矢印/左矢印をそれぞれフェードインさせる。

お手数ですが、ご教授いただければと思います。
何卒よろしくお願いいたします。