Making slider of html content with pagination in jquery
There is a lot of script provider for moving your content just like flash slide show in different different style through JavaScript / CSS just use there JavaScript apis and place your html content among there given html code and use some style sheet to styling your content the reference of the site is given bellow of the code.
Script Included
Style Included
Html Code Place your content in commented part....
Reference of the website check out for more...
http://slidesjs.com/#examples
http://touchslider.com
http://bxslider.com
If you don’t find this code as per your need go to the site and check out for more.
Bellow is the javascript code and style sheet according to my need you just copy and paste code and do some modification according to your need
Script Included
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://touchslider.com/jquery.touchslider.min.js"></script>
<script>
jQuery(function($) {
$(".touchslider").touchSlider({ mouseTouch: true, margin: 5, duration: 350, delay: 3000, autoplay: true });
});
</script>
Style Included
<style type="text/css">
.touchslider
{
width: 200px;
height: 220px;
border-style:solid;
border-width:thick;
border-color:Yellow;
}
.touchslider-viewport, .touchslider-item *
{
width: 200px;
height: 200px;
}
.touchslider-nav-item
{
display:inline-block;
width: 15px;
height: 10px;
background-image: url("http://slidesjs.com/examples/images-with-captions/img/pagination.png");
background-repeat: no-repeat;
background-position: center -1px;
cursor: pointer;
}
.touchslider-nav-item-current
{
background-image: url("http://slidesjs.com/examples/images-with-captions/img/pagination.png");
background-repeat: no-repeat;
background-position: center -13px;
}
.pagination
{
display:inline-block;
padding-top:10px;
}
</style>
Html Code Place your content in commented part....
<div class="touchslider" align="center">
<div class="touchslider-viewport" style="overflow: hidden">
<div>
<div class="touchslider-item">
<%--Your Html Content img or object for video--%>
</div>
<div class="touchslider-item">
<%--Your Html Content img or object for video--%>
</div>
<div class="touchslider-item">
<%--Your Html Content img or object for video--%>
</div>
<%--....and so on--%>
</div>
</div>
<div align="center" class="pagination">
<span class="touchslider-prev"></span>
<span class="touchslider-nav-item touchslider-nav-item-current"></span>
<span class="touchslider-nav-item"></span>
<span class="touchslider-nav-item"></span>
<span class="touchslider-next"></span>
</div>
</div>
Reference of the website check out for more...
http://slidesjs.com/#examples
http://touchslider.com
http://bxslider.com
