HTML code i am creating jquery image slider and this html and css code for that image slider.
<style type="text/css">
#slider{overflow: hidden; width: 600px; height: 400px; position: relative; border: 4px solid #CCC; margin: auto;}
#slider ul{padding: 0; margin: 0; width: 2400px; position: relative; top: 0; left: 0;}
#slider ul li{list-style: none; float: left;}
#slider ul li img{width: 600px; height: 400px;}
.next{position: relative; left: 700px; }
.prev{position: relative; left: 500px; }
</style>
</head>
<body>
<div id="slider">
<ul>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
<li><img src="4.jpg" /></li>
<li><img src="5.jpg" /></li>
</ul>
</div>
<button class="next">Next</button>
<button class="prev">prev</button>
</body>
</html>
JS code This is jquery code for image slider in which next button working properly but i tried to create prev button code but didn't get success.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var count = $("#slider ul li").length;
var li_w = $("#slider ul li:first").width();
var ul_w = count*li_w;
var i = li_w;
$(".next").click(function(){
$("#slider ul").animate({"left":-i+"px"}, 1000);
i+= li_w;
if(i==ul_w){
i=0;
}
});
$(".prev").click(function(){
});
});
</script>
I changed your javascript a bit but I think its more logical like this. Here you can try it out: http://jsfiddle.net/vkk52bz2/2/
$(function(){
var count = $("#slider ul li").length;
var li_w = $("#slider ul li:first").width();
var ul_w = count*li_w;
var i = 0; // start with the position 0
$(".next").click(function(){
i -= li_w; // subtract the width of a slide
if(i==ul_w*-1){ // check if it hit the end
i=0;
}
$("#slider ul").animate({"left":i+"px"}, 1000);
});
$(".prev").click(function(){
i += li_w; // add the width of a slide
if(i>0){ // check if it hit end
i= ((count-1) * li_w) * -1;
}
$("#slider ul").animate({"left":i+"px"}, 1000);
});
});
I tested it and it works https://jsfiddle.net/thair/s8hhz415/2/embedded/result/
html
<div id="slider">
<ul>
<li><img src="http://kelmih.com/Photos/News/31.jpg" /></li>
<li><img src="http://kelmih.com/Photos/News/27.JPG" /></li>
<li><img src="http://kelmih.com/Photos/News/23.jpg" /></li>
<li><img src="http://kelmih.com/Photos/News/24.jpg" /></li>
</ul>
</div>
<button class="next">Next</button>
<button class="prev">prev</button>
css
#slider{overflow: hidden; width: 600px; height: 400px; position: relative; border: 4px solid #CCC; margin: auto;}
#slider ul{padding: 0; margin: 0; width: 2400px; position: relative; top: 0; left: 0;}
#slider ul li{list-style: none; float: left;}
#slider ul li img{width: 600px; height: 400px;}
.next{position: relative; left: 100px; }
.prev{position: relative; left: 0px; }
JS
$(function(){
var count = $("#slider ul li").length;
var li_w = $("#slider ul li:first").width();
var ul_w = count*li_w;
var i = 0;
$(".next").click(function(){
i+= li_w;
if(i>ul_w || i==ul_w){
i=0;
}
$("#slider ul").animate({"left":-i+"px"}, 1000);
});
$(".prev").click(function(){
i-= li_w;
if(i<0 ){
i=ul_w - li_w;
}
$("#slider ul").animate({"left":-i+"px"}, 1000);
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.