How to make custom slider with next and previous arrow with jquery. Simple jquery code you have used to make custom slider.
See the given below code.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Slider With Next previous Arrow</title>
<style type="text/css">
*{padding:0; margin:0;}
.container{width:1000px; margin:0 auto;}
.container .slider{width:100%; float:left; border:1px solid #ccc; box-sizing:border-box; position:relative; overflow-x:hidden;}
.container .slider ul{position:relative; padding:0; margin:0; list-style:none;}
.container .slider ul li{width:1000px; float:left;}
.container #next{position:absolute; top:50%; right:0; cursor:pointer; background-color:#fff; font:bold 15px/20px Arial, Helvetica, sans-serif; padding:5px;}
.container #prev{position:absolute; top:50%; left:0; cursor:pointer; background-color:#fff; font:bold 15px/20px Arial, Helvetica, sans-serif; padding:5px;}
</style>
</head>
<body>
<div class="container">
<div class="slider">
<ul>
<li><img src="slider-img01.jpg" alt="" /></li>
<li><img src="slider-img01.jpg" alt="" /></li>
<li><img src="slider-img01.jpg" alt="" /></li>
<li><img src="slider-img01.jpg" alt="" /></li>
<li><img src="slider-img01.jpg" alt="" /></li>
</ul>
<div id="next">Next</div>
<div id="prev">Prev</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
var lenphoto = $('.slider ul li').length;
var slwidth = $('.slider ul li').width();
var sltwidth = (slwidth)*lenphoto;
$('.slider ul').css('width', sltwidth);
var counters = 1;
$('#next').click(function(){
if(counters < lenphoto)
{
$('.slider ul').animate({
left : '-='+slwidth
});
counters += 1;
$('#prev').css('opacity', '1');
}
else{
$('#next').css('opacity', '0.5');
}
});
$('#prev').click(function(){
if(counters == 1)
{
$('#prev').css('opacity', '0.5');
}
else{
$('.slider ul').animate({
left : '+='+slwidth
});
counters -= 1;
$('#next').css('opacity', '1');
}
});
});
</script>
</body>
</html>
Comments
Post a Comment