<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.caarrusel { width:800px;
height:145px;
overflow:hidden;
position:relative;
border:1px solid #dadada;
padding:5px;
font-family:Arial;
font-size:13px;
}
.content { display:inline-flex;
position:relative;
}
.content>div { width:100px;
height:135px;
overflow:hidden;
padding:3px;
border:1px solid #eaeaea;
border-radius:5px;
color:#808080;
box-shadow:3px 3px 10px rgba(0, 0, 0, 0.2);
margin:0 5px;
}
.content>div>div:first-child { height:100px;
}
.caarrusel>div>div img { max-width:100%;
}
.movimiento { width:16px;
height:16px;
position:absolute;
top:57px;
cursor:pointer;
border: solid #dadada;
transition: all 0.3s;
border-width: 0 8px 8px 0;
display: inline-block;
padding: 3px;
}
.movimiento:hover { border: solid #808080;
border-width: 0 8px 8px 0;
}
.prev { left:10px;
transform: rotate(135deg);
}
.next { right:10px;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="caarrusel">
<div class="content">
<div>
<div><img src="https://1.bp.blogspot.com/-39aI0Qaef6g/XPz_6QBl_GI/AAAAAAAAIFU/D6Xd2txGBwssyTtuthTMK3kk2EMQEUh3ACLcBGAs/s400/Alerta%2BM%25C3%25A1xima%2B2%2B-%2B%255Bfrontal%255D.jpg"></div>
<div>Alerta máxima 2</div>
</div>
<div>
<div><img src="https://1.bp.blogspot.com/-BKuLwcPYUnE/XWPNGsW7TZI/AAAAAAAAIVc/1m-AVDP9S849jDtnaRM9mA_3R7WneMECgCLcBGAs/s1600/El%2Bparque%2Bm%25C3%25A1gico%2B-%2B%255Bfrontal%255D.jpg"></div>
<div>El parque mágico</div>
</div>
<div>
<div><img src="https://1.bp.blogspot.com/-iig28nUdu8U/XVU0sqAVP4I/AAAAAAAAIQ4/AuLkivdnxs4L2tYl-Igp5xrnuQa-EXMnwCLcBGAs/s1600/Spider-man%2B-%2BUn%2Bnuevo%2Buniverso%2B-%2B%255Bfrontal%255D.jpg"></div>
<div>Spiderman</div>
</div>
<div>
<div><img src="https://1.bp.blogspot.com/-1mVmFcHSSHo/XSodL4DhnUI/AAAAAAAAILo/H7RmAgRlIKchuRkRMgwklOaomCyf-BcswCLcBGAs/s1600/La%2Bcostilla%2Bde%2BAd%25C3%25A1n%2B-%2B%255Bfrontal%255D.jpg"></div>
<div>La costilla de Adán</div>
</div>
<div>
<div><img src="https://1.bp.blogspot.com/-KxPFVspmDgc/XVRYLlIVIhI/AAAAAAAAIQc/JWHv0_gGKbAIAwvQkFxD5_vcUn-FSg0_gCLcBGAs/s1600/Alita%2B-%2BAngel%2Bde%2Bcombate%2B-%2B%255Bfrontal%255D.jpg"></div>
<div>Alita</div>
</div>
<div>
<div><img src="https://4.bp.blogspot.com/-zFW9A1bpMcU/XOF4G-bSe0I/AAAAAAAAH_Q/wEXeX6owGZUYb4hLIOaKeOuLfVzeiGyjQCLcBGAs/s1600/La%2Bse%25C3%25B1al%2B-%2B%255Bfrontal%255D.jpg"></div>
<div>La señal</div>
</div>
<div>
<div><img src="https://1.bp.blogspot.com/-8Vk1vdhJb9E/XSo3MArJvvI/AAAAAAAAIME/yDIVZgpkWvU1vpn906YTEHNV_b7ZxK2wwCEwYBhgL/s1600/El%2BGordo%2By%2Bel%2BFlaco%2B-%2B%255Bfrontal%255D.jpg"></div>
<div>el gordo y el flaco</div>
</div>
<div>
<div><img src="https://1.bp.blogspot.com/-n283VbaeHSY/XSHjEEBsMAI/AAAAAAAAIKA/sX5vlqaeppAcU2v1plX9H-ccJNYSS0aJQCLcBGAs/s1600/Los%2Bchicos%2Bde%2Bla%2Blluvia%2B-%2B%255Bfrontal%255D.jpg"></div>
<div>Los chivos dela lluvia</div>
</div>
<div>
<div><img src="https://3.bp.blogspot.com/-UqYo3sP9zso/XLn0c8XLyXI/AAAAAAAAH6E/4sXKM6CTXSIWZgzeD0VdRpSQ2Y6qE2C9wCLcBGAs/s1600/SpiderMan%2B-%2BHomecoming%2B-%2B%255Bfrontal%255D.jpg"></div>
<div>Spiderman Home Comming</div>
</div>
<div>
<div><img src="https://1.bp.blogspot.com/-8uvW7elWNfc/XSnzIzd4ecI/AAAAAAAAILQ/c9L9LLwaVc4wQa6q_KStMHVc2ThlPZJfQCLcBGAs/s1600/Megalodon%2B-%2B%255Bfrontal%255D.jpg"></div>
<div>Megalodón</div>
</div>
<div>
<div><img src="https://1.bp.blogspot.com/-ZMDVuVvvelI/XRECBE0K5xI/AAAAAAAAIHY/ut4A3neIL5gTGh-OXRZw9JEpO-y8WeOEACLcBGAs/s1600/Dune%2B-%2Besp%2B-%2B%255Bfrontal%255D.jpg"></div>
<div>Dune</div>
</div>
</div>
<div class="movimiento prev"></div>
<div class="movimiento next"></div>
</div>
</body>
</html>
<script>
(function(){ let timer;
let left=0;
function prev(e) { movePrev.call(this);
timer=setTimeout(() => { timer=setInterval(() => { movePrev.call(this)
, 10});
}, 500);
};
function movePrev() { const content=this.parentElement.querySelector(".content"); if (left<0) { left=left+10
content.style.left=left+"px";
}
}
function next(e){ moveNext.call(this);
timer=setTimeout(() => { timer=setInterval(() => { moveNext.call(this)
, 10});
}, 500);
};
function moveNext() { const caarrusel=this.parentElement;
const content=caarrusel.querySelector(".content"); if (left>(content.offsetWidth-caarrusel.clientWidth)*-1) { left=left-10
content.style.left=left+"px";
}
}
const prevEl=document.querySelectorAll(".prev"); prevEl.forEach(el => { el.addEventListener("mousedown", prev); el.addEventListener("mouseup", () => {clearInterval(timer);}); });
const nextEl=document.querySelectorAll(".next"); nextEl.forEach(el => { el.addEventListener("mousedown", next); el.addEventListener("mouseup", () => {clearInterval(timer);}); });
})();
</script>
Crear cuenta
Comentarios sobre la versión: 1 (1)