hi I am using jquery cycle plugin with srollHorz effect but it is not showing my images plz help me! below is my entire code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery Slider</title>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#prev',
timeout: 3000,
pause: 1
});
</script>
<style type="text/css">
#hero{
width:940px;
height:350px;
position:relative;
margin:50px auto;
}
#slider{
widows:940px;
height:350px;
position:absolute;
overflow:hidden;
}
#next{
text-align:center;
line-height:50px;
color:#FFF;
width:50px;
height:50px;
background-color:#000;
position:absolute;
top:150px;
right:0;
z-index:99;
cursor:pointer;
opacity:0;
}
#prev{
text-align:center;
line-height:50px;
color:#FFF;
width:50px;
height:50px;
background-color:#000;
position:absolute;
top:150px;
left:0;
z-index:99;
cursor:pointer;
opacity:0;
}
#hero:hover #next{
opacity:1;
transition: all .5s ease out;
-webkit-transition: all .5s ease out;
}
#hero:hover #prev{
opacity:1;
transition: all .5s ease out;
-webkit-transition: all .5s ease out;
}
</style>
</head>
<body>
<div id="hero">
<div id="next">⟩</div><!--this is next id-->
<div id="prev">⟨</div><!--this is prev id-->
<div id="slider">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
</div><!--end slider id-->
</div><!--end hero id-->
</body>
</html>