estoy haciendo un contenedor de zapatillas.
Al pulsar las flechas, hace un scroll del 50% del width de este mismo contenedor:
const buttonRight = document.querySelector('#slideRight');
const buttonLeft = document.querySelector('#slideLeft');
const clientWidth = document.querySelector('#cards').clientWidth;
buttonRight.onclick = function () {
document.querySelector('#cards').scrollLeft += clientWidth/2;
};
buttonLeft.onclick = function () {
document.querySelector('#cards').scrollLeft -= clientWidth/2;
};
Las zapatillas que se muestran es un foreach sacado desde la base de datos:
EDIT: ejemplo con imágenes estaticas:
(Esto ocurre al hacer scroll y llegar al último elemento)
<div id='cards'>
<div class="card">
<img class="d-block img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"/>
</div>
<div class="card">
<img class="d-block img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"/>
</div>
<div class="card">
<img class="d-block img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"/>
</div>
<div class="card">
<img class="d-block img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"/>
</div>
<div class="card">
<img class="d-block img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"/>
</div>
<div class="card">
<img class="d-block img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"/>
</div>
<div class="card">
<img class="d-block img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"/>
</div>
<div class="card">
<img class="d-block img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"/>
</div>
</div>
<img id="slideLeft" src='{{ asset('img/previous.png') }}'/>
<img id="slideRight" src='{{ asset('img/next.png') }}'/>
Todas las zapatillas se ven de maravilla, excepto la última:
He intentado aplicar tanto márgenes como paddings derechos sin éxito alguno.
Incluso he probado cosas como
#cards .card:last-child{
margin-right: 15px!important;
}
Pero sin ningún tipo de éxito. Aquí dejo el código del CSS:
#cards{
width: 85%;
display: flex;
flex-wrap:nowrap;
overflow-x: auto;
margin:0px auto;
background: red;
}
#cards {
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
#cards::-webkit-scrollbar {
width: 0px; /* For Chrome, Safari, and Opera */
}
#cards .card{
width: 22.9%;
flex: 0 0 auto;
overflow: hidden;
box-shadow: 0px 0px 3px#444;
margin: 10px;
}
#cards .card img{
width: 280px;
height: 240px;
}
#cards .card h2{
font-size: 20px;
text-align: center;
font-weight: 300;
}
#cards .card span{
font-size: 14px;
text-align: center;
font-size: 17px;
font-weight: bold;
}
#slideLeft{
position: absolute;
top: 50%;
left: 0;
width: 60px;
cursor: pointer;
}
#slideRight{
position: absolute;
top: 50%;
right: 0;
width: 60px;
cursor: pointer;
}
¿Qué me puede estar fallando? ¿Qué me estoy quedando atrás? Gracias por leer hasta aqui.
EDIT 2: El ejemplo de los comentarios.