Response title
This is preview!
jquery plugins
in Using jQuery Plugins
•
6 years ago
hello i tried running this code using sublime text but is not working.Someone help please!!
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<title>image slider</title>
<script src="http://malsup.github.io/min/jquery.cycle2.min.js" ></script>
<script type="text/javascript">
$('#slider').cycle({
fx: 'fade',
speed: 'fast',
timeout: 3000,
next: '#next',
prev: '#prev'
});
</script>
<style type="text/css">
#wrapper{
display: block;
height:500px;
width: 800px;
margin: auto;
}
#container{
overflow: auto;
}
#prev{
background-image: url(dennis/left.png);
background-position: center center;
background-repeat: no-repeat;
height: 500px;
width: 80px;
float: left;
position: relative;
display: block;
z-index: 10;
}
#next{
background-image: url(dennis/left.png);
background-position: center center;
background-repeat: no-repeat;
height: 500px;
width: 80px;
float: right;
position: relative;
display: block;
z-index: 10;
transform: rotate(180deg);
}
#slider{
margin: auto;
display: block;
height: 500px;
width: 800px;
overflow: hidden;
position: absolute;
}
</style>
</head>
<body>
<div id="wrapper">
<div id ="container">
<div class="controller" id="prev"></div>
<div id="slider">
<img src="dennis/image1.png" height="500px" width="800px">
<img src="dennis/image2.jpg" height="500px" width="800px">
<img src="dennis/image3.jpg" height="500px" width="800px">
<img src="dennis/image4.jpg" height="500px" width="800px">
<img src="dennis/image5.jpg" height="500px" width="800px">
</div>
<div class="controller" id="next"></div>
</div>
</div>
</body>
</html>
1