Description:
Nowadays, the most popular web design trend
is a sliding horizontal panel on a website. It is very effective method to
attract the user and increase the website usability.
Bx slider is a responsive Jquery image slider with amazing visual
effects.
1. Download Bx Image
slider
We can download from http://bxslider.com or https://github.com/wandoledzep/bxslider-4
2. Extract it and include the files
3. Add the Class name for the UnOrdered
List.
<ul class="ImageSlider">
4. Add Images with the List Item.
5. Once the document is ready, initialize
the bxslider widget to the class name.
$(document).ready(function () {
$('.ImageSlider').bxSlider();
});
6. In
order to work properly, slider must be used a particular set of markup.
Slider must be placed
in either an ordered or unordered list.
Add images inside a List item.
Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<link rel="stylesheet" type="text/css" href="jquery.bxslider.css" />
<script type="text/javascript" src="jquery.bxslider.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.ImageSlider').bxSlider({
auto: true,
pause: 3000,
autoHover: true,
slideWidth: 500,
captions: true
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul class="ImageSlider">
<li>
<img src="Images/1.jpg" title="Image One" />
</li>
<li>
<img src="Images/2.jpg" title="Image Two" />
</li>
<li>
<img src="Images/3.jpg" title="Image Three" />
</li>
<li>
<img src="Images/4.jpg" title="Image Four" />
</li>
</ul>
</div>
</form>
</body>
</html>
Jquery Slideshow, Image Slideshow using Jquery , How
to add Image slider using Jquery, Image sliding effect with Jquery, Jquery
Image slider, Jquery Image slider plugin, Simple Jquery Slideshow Tutorial,
Creating Slideshow with Jquery, horizontal image slideshow
0 comments:
Post a Comment