<![CDATA[<!doctype html>
<!--Insert Images of 100px by 100px in same folder with name
1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg, 6.jpg to make this code work-->
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
<style>
.s1{
width:100px;
height:100px;
overflow:hidden;
position:relative;
}
.mmm{
width:700px;
height:100px;
position:absolute;
}
.c1{
width:100px;
height:100px;
float:left;
}
</style>
</head>
<body>
<div class="s1">
<div class="mmm">
<div class="c1"><img decoding="async" src="1.jpg"></div>
<div class="c1"><img decoding="async" src="2.jpg"></div>
<div class="c1"><img decoding="async" src="3.jpg"></div>
<div class="c1"><img decoding="async" src="4.jpg"></div>
<div class="c1"><img decoding="async" src="5.jpg"></div>
<div class="c1"><img decoding="async" src="6.jpg"></div>
<div class="c1"><img decoding="async" src="1.jpg"></div>
</div>
</div>
<input type="button" id="k1" value="right"><input type="button" id="k2" value="left">
<script>
ddd=1;
$("#k1").click(
function()
{
if(ddd<=6)
{
$(".mmm").animate({left:"-=100px"},1000);
ddd++;
}
else{
$(".mmm").animate({left:"0"},0);
$(".mmm").animate({left:"-100px"},1000);
ddd=2;}
}
);
$("#k2").click(
function()
{
if(ddd>=2)
{
$(".mmm").animate({left:"+=100px"},1000);
ddd--;
}
else{
$(".mmm").animate({left:"-=600px"},0);
$(".mmm").animate({left:"+=100px"},1000);
ddd=6;
}
}
);
</script>
</body>
</html>]]>
