Quisiera saber si se puede hacer un slide-show
modificando el padding del contenedor de las imágenes. Es decir, cuando se le vaya dando click al botón de siguiente, que el contenedor de las imágenes vaya adquiriendo un padding mayor para que se posicionen una a una las imágenes y que cuando llegue a la imagen final que se haga un bucle para que regrese a la inicial.
No sé si se podrá, he intentado pero solo se he hecho que se muevan 2 imágenes y no se como hacer que se muestren una por una cuando se le de click a los botones.
function init() {
document.getElementById("btn_next").onclick = siguiente;
document.getElementById("btn_prev").onclick = Izquierda;
}
init();
function siguiente() {
document.getElementById("cont_img").style.paddingLeft = "400px";
}
function Izquierda() {
document.getElementById("cont_img").style.paddingLeft = "1200px";
}
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.centrarflex {}
.main_conten {
display: flex;
justify-content: center;
overflow: hidden;
width: 400px;
border: 3px solid black;
}
.group {
display: flex;
background: blue;
transition: 0.5s;
padding-left: 1200px;
}
.btn_prev {
cursor: pointer;
font-size: 35px;
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background: black;
position: absolute;
transform: translate(-170px, 170px);
border-radius: 50%;
color: white;
}
.btn_next {
display: flex;
cursor: pointer;
font-size: 35px;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background: black;
position: absolute;
transform: translate(170px, 170px);
border-radius: 50%;
color: white;
}
<div class="centrarflex">
<div class="main_conten">
<div id="cont_img" class="group">
<img id="imagen1" src="https://i.pinimg.com/originals/61/37/a0/6137a0b858af6cec81cc5910467d21ad.jpg" alt="sskama">
<img id="imagen2" src="https://pm1.narvii.com/6465/442c541129a5d1b1bba6221872e85dcf41b775f4_hq.jpg" alt="sskama">
<img id="imagen3" src="http://pm1.narvii.com/6055/2eae41d4253b0a9296d9c14e4df90ae5833e7352_hq.jpg" alt="sskama">
<img id="imagen4" src="https://pm1.narvii.com/6567/84b9b654e31c3f1071cf8c77f760533e4e855f65_hq.jpg" alt="sskama">
</div>
<div id="btn_prev" class="btn_prev"> ← </div>
<div id="btn_next" class="btn_next"> → </div>
</div>
</div>
document.getElementById("btn_next").onclick(siguiente);