In this web design tutorial, we will learn to create custom image slider above using Photoshop, which you can preview the final result from here. Not only will we illustrate it in Photoshop, we will also turn it into a functional design by converting it into HTML/CSS and adding jQuery for its awesome sliding effect.
Demo
<script src="jquery-1.9.1.js"></script>
<script src="jquery.cycle.all.js"></script>
<script>
function slider()
{
$("#div1").cycle({fx:'scrollLeft'})
}
</script>
<body onload="slider()">
<div id="div1" style="position:absolute;top:100;left:100;">
<img src="1.jpg" width="200">
<img src="2.jpg" width="200">
<img src="3.jpg" width="200">
<img src="4.jpg" width="200">
</div>
</body>
Demo
<script src="jquery-1.9.1.js"></script>
<script src="jquery.cycle.all.js"></script>
<script>
function slider()
{
$("#div1").cycle({fx:'scrollLeft'})
}
</script>
<body onload="slider()">
<div id="div1" style="position:absolute;top:100;left:100;">
<img src="1.jpg" width="200">
<img src="2.jpg" width="200">
<img src="3.jpg" width="200">
<img src="4.jpg" width="200">
</div>
</body>
0 comments:
Post a Comment