スライドのガタガタを解決、背景のmousemoveを効かせる

前提・実現したいこと

スライダー作成での動きでTよりも右に行こうとすると一時停止してガタつきながら右に移動することを解消したい。
文字の背景画像をmousemoveさせようとしたがしない

###参考資料
https://www.youtube.com/watch?v=deufp4NK4PI&t=54s

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4	<link rel="stylesheet" href="Main.css">
5	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
6	<script src="JQUERY%20Main.js"></script>
7</head>
8<body>
9	<div id="main">
10		<div id="slider">
11			<div id="F">
12			F
13			</div>
14			<div class="line"></div>
15			<div id="data">
16					CASE 1<br>
17					<hr size="2" width="50px" color="#111" align="left"/>
18					<div class="title">title1<br>DESIGN</div>
19					<div class="info">sample_text,sample_text,sample_text,sample_text,sample_text</div>
20			</div>
21
22			<div id="T">
23			T
24			</div>
25			<div class="line"></div>
26			<div id="data2">
27					CASE 2<br>
28					<hr size="2" width="50px" color="#111" align="left"/>
29					<div class="title">title2<br>DESIGN</div>
30					<div class="info">sample_text,sample_text,sample_text,sample_text,sample_text</div>
31			</div>
32
33			<div id="A">
34			A
35			</div>
36			<div class="line"></div>
37			<div id="data3">
38					CASE 3<br>
39					<hr size="2" width="50px" color="#111" align="left"/>
40					<div class="title">title3<br>DESIGN</div>
41					<div class="info">sample_text,sample_text,sample_text,sample_text,sample_text</div>
42			</div>
43
44
45			<div id="X">
46			X
47			</div>
48			<div class="line"></div>
49			<div id="data4">
50					CASE 4<br>
51					<hr size="2" width="50px" color="#111" align="left"/>
52					<div class="title">title4<br>DESIGN</div>
53					<div class="info">sample_text,sample_text,sample_text,sample_text,sample_text</div>
54			</div>
55		</div>
56	</div>
57			<div id="navigation">
58				<a href="#" id="circle1"></a>
59				<a href="#" id="circle2"></a>
60				<a href="#" id="circle3"></a>
61				<a href="#" id="circle4"></a>
62			</div>
63			<script type="text/javascript">
64	var  l1=$("#F");
65	var  l2=$("#T");
66	var  l3=$("#A");
67	var  l4=$("#X");
68
69	var layer=$("#main");
70
71	layer.mousemove(function(e){
72		var valueX=(e.pageX * -1 / 40);
73		l1.css({'background-position':(valueX-200)+' '+ 0});
74		l2.css({'background-position':(valueX)+' '+ 0});
75		l3.css({'background-position':(valueX-200)+' '+ 0});
76		l4.css({'background-position':(valueX+600)+' '+ 0});
77	});
78
79
80</script>
81</body>
82
83
84
85</html>

css
1body{
2	margin:0px;
3	padding:0px;
4}
5
6#main{
7	height: 100vh;
8	width:100%;
9	background-color:#03A9F4;
10	overflow: hidden;
11}
12
13#slider{
14	position: relative;
15	width: 400%;
16	margin: 0px;
17	left: 5%;
18}
19
20#F, #T, #A, #X{
21	width: 25%;
22	font-size: 20cm;
23	font-family: serif;
24	line-height: 16.5cm;
25	background-image: url(00012.jpg);
26	background-position: -200px 0px; /* addd if requied*/
27	background-size: cover;
28	background-attachment: fixed;
29	-webkit-background-clip:text;
30	-webkit-text-fill-color: transparent;
31	float: left;
32	
33}
34
35#T{
36	background-image: url(00001.jpg);
37	background-position: 0px 0px;
38}
39
40#A{
41	background-image: url(00008.jpg);
42	background-position: -200px 0px;
43}
44
45#X{
46	background-image: url(00004.jpg);
47	background-position: 600px 0px;
48}
49
50
51
52#data,#data2,#data3,#data4{
53	width: 350px;
54	font-family: arial;
55	font-size: 14px;
56	color: #111;
57	line-height: 35px;
58	position: fixed;
59	top: 50%;
60	left: 75%;
61	transform: translate(-50%, -50%);
62}
63
64
65#data2{
66	left: 40%;
67		display:none;
68}
69
70#data2 .info .title{
71	display:none;
72}
73
74
75#data3{
76	left: 70%;
77		display:none;
78}
79
80#data3 .info .title{
81	display:none;
82}
83
84#data4{
85	left: 40%;
86		display:none;
87}
88
89
90#data4 .info .title{
91	display:none;
92}
93
94.title{
95	margin-top: 5px;
96	font-size: 35px;
97	font-family: serif;
98}
99
100.info{
101	width: 350px;
102	margin-top: 5px;
103	font-family: arial;
104	font-size: 12px;
105	line-height: 25px;
106	text-align: justify;
107}
108
109.line{
110	height: 80%;
111	width: 2px;
112	position: fixed;
113	top: 15%;
114	left: 60%;
115	background: linear-gradient(#111 0%,#03A9F4 90%);
116}
117
118hr{
119	margin: 0px;
120	padding: 0px;
121	margin-top: -6px;
122}
123
124
125#navigation{
126	position: absolute;
127	bottom: 10%;
128	left: 50%;
129	transform: translateX(-50%);
130}
131
132a{
133	width: 10px;
134	height: 10px;
135	display: inline-block;
136	background-color: #111;
137	border-radius: 50%;
138	outline: none;
139	border: 2px solid #111;
140	transition: all .5s;
141}
142

JQUERY Main.js

$(document).ready(function() {
	$("a:nth-child(1)").css("background-color","white");
	
	$("#circle1").click(function(){
		$("#slider").animate({'left':'5%'},500);
		$("#data").fadeIn(700);
		$("#data2,#data3,#data4").fadeOut(500);
		$(".line").animate({'left':'60%'});
		$("a:nth-child(1)").css("background-color","white");
		$("a:nth-child(2),a:nth-child(3),a:nth-child(4)").css("background-color","black");
	});

	$("#circle2").click(function(){
		$("#slider").animate({'left':'-45%'},500);
		$("#data2").fadeIn(700);
		$("#data,#data3,#data4").fadeOut(500);
		$(".line").animate({'left':'25%'});
		$("a:nth-child(2)").css("background-color","white");
		$("a:nth-child(1),a:nth-child(3),a:nth-child(4)").css("background-color","black");
	});

	$("#circle3").click(function(){
		$("#slider").animate({'left':'-190%'},500);
		$("#data3").fadeIn(700);
		$("#data,#data2,#data4").fadeOut(500);
		$(".line").animate({'left':'55%'});
		$("a:nth-child(3)").css("background-color","white");
		$("a:nth-child(1),a:nth-child(2),a:nth-child(4)").css("background-color","black");
	});

	$("#circle4").click(function(){
		$("#slider").animate({'left':'-245%'},500);
		$("#data4").fadeIn(700);
		$("#data,#data2,#data3").fadeOut(500);
		$(".line").animate({'left':'25%'});
		$("a:nth-child(4)").css("background-color","white");
		$("a:nth-child(1),a:nth-child(2),a:nth-child(3)").css("background-color","black");
	});
});