<html>
<head>
<title></title>
<style type="text/css">
.container
{
width: 90%;
margin:20px auto;
height: 300px;
}
.carosal
{
border: 2px solid red;
height:100%;
width:100%;
display: flex;
justify-content: flex-start;
position: relative;
overflow: hidden;
}
.slider
{
border: 2px solid green;
display: flex;
height: 100%;
width: 500%;
flex-shrink: 0;
transition: all 0.5s;
border: 2px solid red;
}
.slider section
{
flex-basis:20%;
flex-shrink: 0;
flex: 1;
width: 10%;
display: flex;
PADDING:10PX;
align-items: center;
}
.arrow
{
position: absolute;
top:10px;
cursor: pointer;
}
.arrow.left
{
left:10px;
}
.arrow.right
{
right:10px;
}
P
{
MARGIN-LEFT:100PX;
}
.product_box
{
border:2px solid blue;
height:400px;
display:flex;
align-items:center;
padding:10px
}
.box1
{
border:2px solid green;
width:40%;
height:98%;
}
.box1
{
border:2px solid green;
width:40%;
height:98%;
}
.box3
{
border:2px solid red;
width:30%;
height:98%;
}
.box2
{
border:2px solid blue;
width:30%;
height:98%;
}
.box1 img
{
width:100%;
height:100%;
}
</style>
</head>
<body>
<DIV class="product_box">
<div class="box1">
<img src="1.jpg">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</DIV>
<div class="container">
<div class="carosal">
<div class="slider">
<section>
<IMG SRC="1.JPG" HEIGHT=100% WIDTH=40%>
<P>HELLO DATA OF PRODUCT1</P>
</section>
<section>
<IMG SRC="1.JPG" HEIGHT=100% WIDTH=40%>
<P>HELLO DATA OF PRODUCT2</P>
</section>
<section>
<IMG SRC="1.JPG" HEIGHT=100% WIDTH=40%>
<P>HELLO DATA OF PRODUCT3</P>
</section>
<section>
<IMG SRC="1.JPG" HEIGHT=100% WIDTH=40%>
<P>HELLO DATA OF PRODUCT4</P>
</section>
<section>
<IMG SRC="1.JPG" HEIGHT=100% WIDTH=40%>
<P>HELLO DATA OF PRODUC5</P>
</section>
</div>
<div class="arrow left">left</div>
<div class="arrow right">right</div>
</div>
</div>
<script type="text/javascript">
const slider=document.querySelector(".slider");
const left=document.querySelector(".left");
const right=document.querySelector(".right");
const carosal=document.querySelector(".carosal");
var direction=1;
left.addEventListener("click",function(){
direction=1;
carosal.style.justifycontent='flex-end';
slider.style.transform='translate(20%)';
});
right.addEventListener("click",function(){
direction=-1
carosal.style.justifycontent='flex-start';
slider.style.transform='translate(-20%)';
});
slider.addEventListener('transitionend',function(){
if(direction==-1)
{
slider.appendChild(slider.firstElementChild);
}
else if(direction ==1)
{
slider.prepend(slider.lastElementChild);
}
slider.style.transition='none';
slider.style.transform='translate(0)';
setTimeout(function()
{
slider.style.transition='all 0.5s';
})
});
</script>
</script>
</body>
</html>
0 Comments