イメージ スライダー コードで jquery 1.7.2 を使用していますが、コンソールに次のエラーが表示されます。理由がわかりません。
HTML コード:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>iSlider</title>
<meta name="robots" content="index, follow, noarchive" />
<!-- CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/iSlider.css" type="text/css" />
<!-- JS -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<!-- <script type="text/javascript" src="js/jquery.js"></script> -->
<script type="text/javascript" src="js/jquery.ui.touch-punch.js"></script>
<script type="text/javascript" src="js/jquery-css-transform.js"></script>
<script type="text/javascript" src="js/rotate3Di.js"></script>
<script type="text/javascript">
var imgFront=new Array();
var n=0;
var backimg=new Array();
var frontimg=new Array();
var imgArr = new Array();
var bgImg = new Array();
var arrBackImg = new Array();
var frontText = new Array();
var backText =new Array();
var eventChk="";
var i = 1;
var ua = navigator.userAgent;
var clickEvent = (ua.match(/iPad/i)) ? 'touchstart' : 'click';
var isTouchSupported = "ontouchend" in document
$(document).ready(function () {
$('#myImageFlow').on('click touchstart',".sliderImage", touchStart());
});
</script>
</head>
<body style="background-image:url('img/Mesh2.png');background-repeat:no-repeat; background-size: cover; width:'100%'">
<h1>iSlider</h1>
<!-- This is all the XHTML ImageFlow needs -->
<div id="myImageFlow" class="imageflow">
<div id="id1" alt='div1' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img1.jpg'); border:solid; border-color: black;">You've styled the div to have a set width of 100px. At a reasonable font size, that's too much text to fit in 100px. Without doing anything, </div>
<div id="id2" alt='div2' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img2.jpg'); border:solid; border-color: black;">this is 2</div>
<div id="id3" alt='div3' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img3.jpg'); border:solid; border-color: black;">this is 3</div>
<div id="id4" alt='div4' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img4.jpg'); border:solid; border-color: black;">this is 4</div>
<div id="id5" alt='div5' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden; background-image:url('img/img5.jpg'); border:solid; border-color: black;">this is 5</div>
<div id="id6" alt='div6' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img6.jpg'); border:solid; border-color: black;"> this is 6</div>
<div id="id7" alt='div7' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img7.jpg'); border:solid; border-color: black;"> this is 7</div>
<div id="id8" alt='div8' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img8.jpg'); border:solid; border-color: black;">this is 8</div>
<div id="id9" alt='div9' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img9.jpg'); border:solid; border-color: black;"> this is 9</div>
<div id="id10" alt='div10' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img10.jpg'); border:solid; border-color: black;">this is 10</div>
<div id="id11" alt='div11' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img11.jpg'); border:solid; border-color: black;">this is 11</div>
<div id="id12" alt='div12' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img12.jpg'); border:solid; border-color: black;">this is 12</div>
<div id="id13" alt='div13' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img13.jpg');border:solid; border-color: black;">this is 13</div>
<div id="id14" alt='div14' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img12.jpg'); border:solid; border-color: black;">this is 14</div>
<div id="id15" alt='div15' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img6.jpg'); border:solid; border-color: black;"> this is 15</div>
<div id="id16" alt='div16' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img7.jpg'); border:solid; border-color: black;"> this is 16</div>
</div>
</body>
</html>
キャッチされていない TypeError: オブジェクト .sliderImage にメソッド 'apply' がありません