スライドショーの実装

実現したいこと
PCとモバイルのレスポンシブサイトでスライドショーを実装したいです。

発生している問題
現状のものですと、PCで見た際に右矢印をクリックしていくと、
白い画面になってから1枚目の画像に戻ります。
モバイルサイト用にmedia queryを入れてからこのようになってしまいました。
Javascriptの読解力がないため、解決策が見つかりません。
テストサイト
 参照元

初歩的な質問で大変恐縮ですが、ご回答いただければ幸いです。
下記が現状のものになります。

HTML>
1<!DOCTYPE html>
2<html lang="en" >
3<head>
4<meta charset="UTF-8">
5<title>slide</title>
6<link rel="stylesheet" href="./style.css">
7
8</head>
9<body>
10<!-- partial:index.partial.html -->
11	<div class="pc">
12		<div class="slideshowContainer">
13			<img class="imageSlides" data-id="0" src="img/top/header_bg1.jpg">
14			<img class="imageSlides" data-id="1" src="img/top/header_bg2.jpg">
15			<img class="imageSlides" data-id="2" src="img/top/header_bg3.jpg">
16
17			<span id="leftArrow" class="slideshowArrow">&#8249;</span>
18			<span id="rightArrow" class="slideshowArrow">&#8250;</span>
19
20			<div class="slideshowCircles">
21				<span class="circle dot" data-id="0"></span>
22				<span class="circle" data-id="1"></span>
23				<span class="circle" data-id="2"></span>
24			</div>
25
26		</div>
27		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
28		<!-- partial -->
29		<script src="./script.js"></script>
30	</div>
31
32
33	<div class="sp">
34		<div class="slideshowContainer">
35
36			<img class="imageSlides" data-id="0" src="img/top/header_bg1_sp.jpg">
37			<img class="imageSlides" data-id="1" src="img/top/header_bg2_sp.jpg">
38			<img class="imageSlides" data-id="2" src="img/top/header_bg3_sp.jpg">
39
40			<span id="leftArrow" class="slideshowArrow">&#8249;</span>
41			<span id="rightArrow" class="slideshowArrow">&#8250;</span>
42
43			<div class="slideshowCircles">
44				<span class="circle dot" data-id="0"></span>
45				<span class="circle" data-id="1"></span>
46				<span class="circle" data-id="2"></span>
47			</div>
48		</div>
49		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
50		<!-- partial -->
51		<script src="./script.js"></script>
52	</div>
53
54</body>
55</html>
56

CSS
1@charset "UTF-8";
2html,body {
3	margin:0;
4	padding:0;
5	width:100%;
6}
7
8.pc { display:block  !important; }
9.sp { display:none !important; }
10
11@media only screen and (max-width:640px) {
12.pc { display:none !important; }
13.sp { display:block !important; }
14}
15
16/*bigger than 640-----------------------------*/
17@media screen and (min-width:640px) {
18
19.slideshowContainer {
20  position: relative;
21  overflow: hidden;
22  width: 100%;
23  height: 800px;
24}
25
26.imageSlides {
27  position: absolute;
28  left: 50%;
29  top: 50%;
30  transform: translate(-50%, -50%);
31  min-width: 100%;
32  min-height: 100%;
33  opacity: 0;
34  transition: opacity 1s ease-in-out;
35  z-index: -1;
36}
37
38/* add 'visible' class via Javascript */
39.visible {
40  opacity: 1;
41}
42
43.slideshowArrow {
44  font-size: 7em;
45  color: rgba(255, 255, 255, 0.5);
46  cursor: pointer;
47  transition: opacity 0.2s ease-in-out;
48}
49
50.slideshowArrow:hover {
51  opacity: 0.75;
52}
53
54#leftArrow {
55  position: absolute;
56  left: 4%;
57  top: 50%;
58  transform: translate(-50%, -50%);
59}
60
61#rightArrow {
62  position: absolute;
63  right: 4%;
64  top: 50%;
65  transform: translate(50%, -50%);
66}
67
68.slideshowCircles {
69  position: absolute;
70  bottom: 2%;
71  left: 50%;
72  transform: translate(-50%, -50%);
73  text-align: center;
74}
75
76.circle {
77  display: inline-block;
78  margin-left: 3px;
79  margin-right: 3px;
80  width: 15px;
81  height: 15px;
82  border-radius: 50%;
83  border: solid 2px rgba(255, 255, 255, 0.5);
84  transition: 1s ease-in-out;
85}
86
87.dot {
88  background-color: rgba(255, 255, 255, 0.7);
89  border: solid 2px rgba(255, 255, 255, 0.5);
90}
91	
92}
93
94
95/*smaller than 640-----------------------------*/
96@media screen and (max-width:640px) {
97
98.slideshowContainer {
99  position: relative;
100  overflow: hidden;
101  width: 100%;
102	height: 0;
103	padding-top: 150%;
104}
105
106.imageSlides {
107  position: absolute;
108  left: 50%;
109  top: 50%;
110  transform: translate(-50%, -50%);
111  min-width: 100%;
112  min-height: 100%;
113  opacity: 0;
114  transition: opacity 1s ease-in-out;
115  z-index: -1;
116}
117
118/* add 'visible' class via Javascript */
119.visible {
120  opacity: 1;
121}
122
123.slideshowArrow {
124  font-size: 7em;
125  color: rgba(255, 255, 255, 0.5);
126  cursor: pointer;
127  transition: opacity 0.2s ease-in-out;
128}
129
130.slideshowArrow:hover {
131  opacity: 0.75;
132}
133
134#leftArrow {
135  position: absolute;
136  left: 4%;
137  top: 50%;
138  transform: translate(-50%, -50%);
139}
140
141#rightArrow {
142  position: absolute;
143  right: 4%;
144  top: 50%;
145  transform: translate(50%, -50%);
146}
147
148.slideshowCircles {
149  position: absolute;
150  bottom: 2%;
151  left: 50%;
152  transform: translate(-50%, -50%);
153  text-align: center;
154}
155
156.circle {
157  display: inline-block;
158  margin-left: 3px;
159  margin-right: 3px;
160  width: 15px;
161  height: 15px;
162  border-radius: 50%;
163  border: solid 2px rgba(255, 255, 255, 0.5);
164  transition: 1s ease-in-out;
165}
166
167.dot {
168  background-color: rgba(255, 255, 255, 0.7);
169  border: solid 2px rgba(255, 255, 255, 0.5);
170}
171	
172}

Javascript
1var imageSlides = document.getElementsByClassName('imageSlides');
2            var circles = document.getElementsByClassName('circle');
3            var leftArrow = document.getElementById('leftArrow');
4            var rightArrow = document.getElementById('rightArrow');
5            var slideshowCircles = document.querySelectorAll('.slideshowCircles')[0];
6            var counter = 0;
7
8            function hideImages() {
9                for (var i = 0; i < imageSlides.length; i++) {
10                    imageSlides[i].classList.remove('visible');
11                }
12            }
13
14            function removeDots() {
15                for (var i = 0; i < imageSlides.length; i++) {
16                    circles[i].classList.remove('dot');
17                }
18            }
19
20            function imageLoop() {
21                var currentImage = $('.imageSlides[data-id=' + counter + ']');
22                var currentDot = $('.circle[data-id=' + counter + ']');
23                currentImage.addClass('visible');
24                removeDots();
25                currentDot.addClass('dot');
26                counter++;
27            }
28
29            function arrowClick(e) {
30                var target = e.target;
31                if (target == leftArrow) {
32                    clearInterval(imageSlideshowInterval);
33                    hideImages();
34                    removeDots();
35                    if (counter == 1) {
36                        counter = (imageSlides.length - 1);
37                        imageLoop();
38                        imageSlideshowInterval = setInterval(slideshow, 10000);
39                    } else {
40                        counter--;
41                        counter--;
42                        imageLoop();
43                        imageSlideshowInterval = setInterval(slideshow, 10000);
44                    }
45                }
46                else if (target == rightArrow) {
47                    clearInterval(imageSlideshowInterval);
48                    hideImages();
49                    removeDots();
50                    if (counter == imageSlides.length) {
51                        counter = 0;
52                        imageLoop();
53                        imageSlideshowInterval = setInterval(slideshow, 10000);
54                    } else {
55                        imageLoop();
56                        imageSlideshowInterval = setInterval(slideshow, 10000);
57                    }
58                }
59            }
60            function circlesClick(e) {
61                var target = e.target;
62                if (target.className == "circle" || target.className == "circle dot") {
63                    clearInterval(imageSlideshowInterval);
64                    hideImages();
65                    removeDots();
66                    counter = $(e.target).data('id');
67                    imageLoop();
68                    imageSlideshowInterval = setInterval(slideshow, 10000);
69                }
70            }
71
72            leftArrow.addEventListener('click', arrowClick);
73            rightArrow.addEventListener('click', arrowClick);
74            slideshowCircles.addEventListener('click', circlesClick);
75
76
77            function slideshow() {
78                if (counter < imageSlides.length) {
79                    imageLoop();
80                } else {
81                    counter = 0;
82                    hideImages();
83                    imageLoop();
84                }
85            }
86
87            setTimeout(slideshow, 100);
88            var imageSlideshowInterval = setInterval(slideshow, 10000);