0

estoy haciendo un contenedor de zapatillas.

introducir la descripción de la imagen aquí

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:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

(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:

introducir la descripción de la imagen aquí

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.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

4
  • Por favor intenta realizar primero un ejemplo mínimo, completo y verificable para poder obtener un resultado nosotros. Reemplaza las imagenes por otras de internet, y carga datos estáticos, de modo que estos generen el problema que tienes. De este modo, otras personas podrán testear tu código y revisar el problema.
    – Excorpion
    Commented el 4 ene. 2021 a las 16:01
  • Yo no termino de entender que falla, ¿quieres que del lado derecho se vea esa línea roja también?, por favor explica un poco mejor mas lo que ya te dicen
    – user128299
    Commented el 4 ene. 2021 a las 16:04
  • Según entiendo, le molesta que el scroll no llegue al final @BetaM. QUizás me corriga si no es asi.
    – Excorpion
    Commented el 4 ene. 2021 a las 16:08
  • Hola, antes de nada gracias por responder y disculpad no haberme entendido. he actualizado el código y puesto un ejemplo con imágenes estáticas tal y como me pedísteis. Y sí, tenéis razón, lo que me molesta es que el último elemento se pega al final del div y no funciona ningún tipo de márgen (el BG rojo es para que se vea mejor el ejemplo).
    – Adromicfms
    Commented el 4 ene. 2021 a las 16:26

1 respuesta 1

0

He creado mi propio ejemplo basado en el tuyo...
Y pasaré a explicar los cambios...

Según yo, el problema está en el CSS. Específicamente en #cards .card
Donde le estás asignando un width fijo, escondes el overflow y usas margin.
Quizás lo del width está bien, pero en mi caso, lo que quitado para que se muestre la imagen en el display que se le ha dado y esta no se rompa.
Lo que está mal, es el overflow, el cual no debería existir, por que no queremos esconder ninguna parte del contenido de la card. Y por último, he cambiado margin por padding dejando el mismo valor. El cuál, creo yo, fue solo una mala aplicación, o errónea.

Revísalo y dime como te va ;)

    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;
    };
    #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 */
    }

    /*
    width: 22.9%;
    overflow: hidden;
    margin: 10px;
    */

    #cards .card {
        flex: 0 0 auto;
        box-shadow: 0px 0px 3px#444;
        padding: 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;
    }
<div class="contenedor">
    <div id='cards'>
        <div class="card">
            <a href="#">
                <img class="d-block img-fluid" src="https://loremflickr.com/320/240/shoe">
            </a>
            <h2>Nombre Producto</h2>
            <span>Precio en Euros</span>
        </div>
        <div class="card">
            <a href="#">
                <img class="d-block img-fluid" src="https://loremflickr.com/320/240/pencil">
            </a>
            <h2>Nombre Producto</h2>
            <span>Precio en Euros</span>
        </div>
        <div class="card">
            <a href="#">
                <img class="d-block img-fluid" src="https://loremflickr.com/320/240/cat">
            </a>
            <h2>Nombre Producto</h2>
            <span>Precio en Euros</span>
        </div>
        <div class="card">
            <a href="#">
                <img class="d-block img-fluid" src="https://loremflickr.com/320/240/dog">
            </a>
            <h2>Nombre Producto</h2>
            <span>Precio en Euros</span>
        </div>
        <div class="card">
            <a href="#">
                <img class="d-block img-fluid" src="https://loremflickr.com/320/240/car">
            </a>
            <h2>Nombre Producto</h2>
            <span>Precio en Euros</span>
        </div>
        <div class="card">
            <a href="#">
                <img class="d-block img-fluid" src="https://loremflickr.com/320/240/plane">
            </a>
            <h2>Nombre Producto</h2>
            <span>Precio en Euros</span>
        </div>
        <div class="card">
            <a href="#">
                <img class="d-block img-fluid" src="https://loremflickr.com/320/240/city">
            </a>
            <h2>Nombre Producto</h2>
            <span>Precio en Euros</span>
        </div>
        <div class="card">
            <a href="#">
                <img class="d-block img-fluid" src="https://loremflickr.com/320/240/ocean">
            </a>
            <h2>Nombre Producto</h2>
            <span>Precio en Euros</span>
        </div>
        <div class="card">
            <a href="#">
                <img class="d-block img-fluid" src="https://loremflickr.com/320/240/space">
            </a>
            <h2>Nombre Producto</h2>
            <span>Precio en Euros</span>
        </div>
        <div class="card">
            <a href="#">
                <img class="d-block img-fluid" src="https://loremflickr.com/320/240/tree">
            </a>
            <h2>Nombre Producto</h2>
            <span>Precio en Euros</span>
        </div>
    </div>
</div>
<img id="slideLeft" src='https://i.gyazo.com/32a21c884c5c9d0bc48e8dfda68a7b48.png' width="20px" />
<img id="slideRight" src='https://i.gyazo.com/607a44966d39305a9784f9eaf37a71dd.png' width="20px" />

10
  • Hola @Excorpion, como tú dices, al no aplicar el margin sí funciona correctamente pero entonces no hay espaciado entre cards (juntándose así las sombras de unos cards con otros) Entonces, lo que yo busco es aplicar de alguna manera ese margen el cual no sé por qué no está funcionando. EDIT: Al aplicar un padding sobre #Cards pasa exáctamente lo mismo que con el margen.
    – Adromicfms
    Commented el 4 ene. 2021 a las 20:14
  • Pues, he vuelto a agregarle margin lefy y right, y funciona de todos modos. Es cosa de volver a acomodarlos.
    – Excorpion
    Commented el 4 ene. 2021 a las 20:25
  • ¿Cómo lo has hecho @Excorpion? He usado tu ejemplo, le he cambiado el padding por el margin:10px; y me pasa lo mismo que a mí en mi proyecto
    – Adromicfms
    Commented el 4 ene. 2021 a las 20:47
  • No, no dije que le quitaras el padding, dije agregale margin. link
    – Excorpion
    Commented el 4 ene. 2021 a las 20:51
  • 1
    No apliques los mismos valores. Ajustalos!
    – Excorpion
    Commented el 4 ene. 2021 a las 22:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.