1

Tengo este carousel con css y query:

html:

<div class="productos-recomendados">
  <h2 class="text-center">PRODUCTOS</h2>
  <p class="text-center">Este es nuestro catalogo de productos</p>
  <div class="contenedor-principal">
    <button role="button" id="flecha-izquierda" class="flecha-izquierda"><i class="fa fa-angle-left"></i></button>
    <div class="contenedor-carousel">
     <div class="carousel">
      <div class="panel panel-default producto">
       <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
       <div class="panel-body">
        <img src="img/sal1.jpg">
        <p class="p-precio">$200.00</p>
        <p class="p-producto">PackEcoSal</p>
       </div>
      </div>    
      <div class="panel panel-default producto">
       <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
       <div class="panel-body">
        <img src="img/sal2.jpg">
        <p class="p-precio">$200.00</p>
        <p class="p-producto">PackEcoSal</p>
       </div>
      </div>
      <div class="panel panel-default producto">
       <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
       <div class="panel-body">
        <img src="img/sal3.jpg">
        <p class="p-precio">$200.00</p>
        <p class="p-producto">PackEcoSal</p>
       </div>
      </div>
      <div class="panel panel-default producto">
       <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
       <div class="panel-body">
        <img src="img/sal4.jpg">
        <p class="p-precio">$200.00</p>
        <p class="p-producto">PackEcoSal</p>
       </div>
      </div>
     </div>
    </div>
    <button role="button" id="flecha-derecha" class="flecha-derecha"><i class="fa fa-angle-right"></i></button>
  </div>
</div>

css:

.productos-recomendados .contenedor-principal,
.categorias .contenedor-principal {
    display: flex;
    align-items: center;
    position: relative;
}

.productos-recomendados .contenedor-principal .flecha-izquierda,
.productos-recomendados .contenedor-principal .flecha-derecha,
.categorias .contenedor-principal .flecha-izquierda,
.categorias .contenedor-principal .flecha-derecha {
    position: absolute;
    border-radius: 50px;
    background-color: #000;
    font-size: 40px;
    height: 50px;
    top: 40%;
    line-height: 40px;
    width: 50px;
    color: #fff;
    cursor: pointer;
    z-index: 500;
    opacity: 0;
    transition: .2s ease all;
}

.productos-recomendados .contenedor-principal .flecha-izquierda,
.categorias .contenedor-principal .flecha-izquierda {
    left: 0;
}

.productos-recomendados .contenedor-principal .flecha-derecha,
.categorias .contenedor-principal .flecha-derecha {
    right: 0;
}

.productos-recomendados .contenedor-carousel,
.categorias .contenedor-carousel {
    width: 100%;
    padding: 20px 0;
    overflow: hidden;
    scroll-behavior: smooth;
}

.productos-recomendados .contenedor-carousel .carousel,
.categorias .contenedor-carousel .carousel {
    display: flex;
    flex-wrap: nowrap;
}

.productos-recomendados .contenedor-carousel .carousel .producto,
.categorias .contenedor-carousel .carousel .categoria {
    min-width: 280px;
    margin-right: 8px;
    transition: .3s ease all;
    box-shadow: 5px 5px 10px rgba(0,0,0, .3);
    cursor: pointer;
}

.productos-recomendados .contenedor-carousel .carousel .producto.hover,
.categorias .contenedor-carousel .carousel .categoria.hover {
    transform: scale(1.2);
    transform-origin: center;
}

jquery:

    var fila;
    var productos;
    
    var flechaIzquierda;
    var flechaDerecha;
    
    
    $(document).ready(function(){
        fila = $('.productos-recomendados .contenedor-carousel');
        productos = $('.producto');
        
        flechaIzquierda = $('#flecha-izquierda');
        flechaDerecha = $('#flecha-derecha');
        
        /* Eventos para las flechas */
        
        $(flechaDerecha).on("mouseover", function(){
            $(this).css("opacity", 0.3);
        });
        
        $(flechaDerecha).on("mouseout", function(){
            $(this).css("opacity", 0);
        });
        
        $(flechaIzquierda).on("mouseover", function(){
            $(this).css("opacity", 0.3);
        });
        
        $(flechaIzquierda).on("mouseout", function(){
            $(this).css("opacity", 0);
        });
        
        $(flechaDerecha).on("click", function(){
            if(fila.scrollLeft() <= fila.width())
            {
                var scrollDer = fila.scrollLeft() + fila.width(); 
                fila.scrollLeft(scrollDer);
            }
            else
                fila.scrollLeft(0);
        });
        
        $(flechaIzquierda).on("click", function(){
            if(fila.scrollLeft() >= fila.width())
            {
                var scrollIzq = fila.scrollLeft() - fila.width(); 
                fila.scrollLeft(scrollIzq);
            }
            else
                fila.scrollLeft(fila.width());
        });
    
    /* Hover */
    
    $(productos).each(function(index, producto){
        $(producto).on("mouseenter", function(e){
            var elemento = e.currentTarget;
            
            setTimeout(function(){
                productos.each(function(index, producto){
                    $(producto).removeClass("hover");
                });
                $(elemento).addClass("hover");
            }, 300);
        });
    });
    
    $(fila).on("mouseleave", function(){
        productos.each(function(index, producto){
            $(producto).removeClass("hover");
        });
    });
});

Lo que estoy haciendo es cuando pasa el mouse sobre un elemento hijo (div que contiene la clase producto) aplico la clase .hover esto para hacer una escala a ese elemento hijo y que se haga mas grande a los demás, el problema es que cuando hago la escala el elemento hijo se corta, como puedo solucionar esto?

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

1 respuesta 1

0

Eso te ocurre, porque la manera de funcionar de un carousel es tener la diapositivas que no están a la vista, saliéndose de su contenedor y ocultándose con un overflow: hidden para que de esta manera luego poder ir animando las diapositivas de tal manera que las que se salían parezca que aparecen de uno de los lados de la pantalla. Esto ocasiona que al agrandar tus elementos .producto lo que se sale de su contenedor queda cortado.

Para solucionarlo le puedes cambiar la propiedad overflow: hidden a tu elemento padre por la propiedad overflow-x: hidden para evitar que al agrandarse se corte por arriba y por abajo.

.productos-recomendados .contenedor-carousel,
.categorias .contenedor-carousel {
    width: 100%;
    padding: 20px 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

En mi ejemplo añadí el efecto de agrandarse con CSS cuando se hace un hover por encima de un elemento .producto, simulando lo que hace tu clase .hover.

.productos-recomendados .contenedor-principal,
.categorias .contenedor-principal {
    display: flex;
    align-items: center;
    position: relative;
}

.productos-recomendados .contenedor-principal .flecha-izquierda,
.productos-recomendados .contenedor-principal .flecha-derecha,
.categorias .contenedor-principal .flecha-izquierda,
.categorias .contenedor-principal .flecha-derecha {
    position: absolute;
    border-radius: 50px;
    background-color: #000;
    font-size: 40px;
    height: 50px;
    top: 40%;
    line-height: 40px;
    width: 50px;
    color: #fff;
    cursor: pointer;
    z-index: 500;
    opacity: 0;
    transition: .2s ease all;
}

.productos-recomendados .contenedor-principal .flecha-izquierda,
.categorias .contenedor-principal .flecha-izquierda {
    left: 0;
}

.productos-recomendados .contenedor-principal .flecha-derecha,
.categorias .contenedor-principal .flecha-derecha {
    right: 0;
}

.productos-recomendados .contenedor-carousel,
.categorias .contenedor-carousel {
    width: 100%;
    padding: 20px 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.productos-recomendados .contenedor-carousel .carousel,
.categorias .contenedor-carousel .carousel {
    display: flex;
    flex-wrap: nowrap;
}

.productos-recomendados .contenedor-carousel .carousel .producto,
.categorias .contenedor-carousel .carousel .categoria {
    min-width: 280px;
    margin-right: 8px;
    transition: .3s ease all;
    box-shadow: 5px 5px 10px rgba(0,0,0, .3);
    cursor: pointer;
}

.productos-recomendados .contenedor-carousel .carousel .producto.hover,
.categorias .contenedor-carousel .carousel .categoria.hover {
    transform: scale(1.2);
    transform-origin: center;
}

.producto:hover {
  transform: scale(1.2);
  background-color: #fff;
  transform-origin: center;
}
<div class="productos-recomendados">
  <h2 class="text-center">PRODUCTOS</h2>
  <p class="text-center">Este es nuestro catalogo de productos</p>
  <div class="contenedor-principal">
    <button role="button" id="flecha-izquierda" class="flecha-izquierda"><i class="fa fa-angle-left"></i></button>
    <div class="contenedor-carousel">
     <div class="carousel">
      <div class="panel panel-default producto">
       <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
       <div class="panel-body">
        <img src="img/sal1.jpg">
        <p class="p-precio">$200.00</p>
        <p class="p-producto">PackEcoSal</p>
       </div>
      </div>    
      <div class="panel panel-default producto">
       <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
       <div class="panel-body">
        <img src="img/sal2.jpg">
        <p class="p-precio">$200.00</p>
        <p class="p-producto">PackEcoSal</p>
       </div>
      </div>
      <div class="panel panel-default producto">
       <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
       <div class="panel-body">
        <img src="img/sal3.jpg">
        <p class="p-precio">$200.00</p>
        <p class="p-producto">PackEcoSal</p>
       </div>
      </div>
      <div class="panel panel-default producto">
       <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
       <div class="panel-body">
        <img src="img/sal4.jpg">
        <p class="p-precio">$200.00</p>
        <p class="p-producto">PackEcoSal</p>
       </div>
      </div>
     </div>
    </div>
    <button role="button" id="flecha-derecha" class="flecha-derecha"><i class="fa fa-angle-right"></i></button>
  </div>
</div>

6
  • Se sigue cortando el elemento hijo, no tiene nada que ver el tamaño del hijo?? Commented el 31 jul. 2020 a las 17:32
  • ¿Qué elemento hijo dices que es el que se corta?
    – phpMyGuel
    Commented el 31 jul. 2020 a las 17:33
  • el elemento hijo que es el div que contiene la clase .producto, a ese div le doy los siguientes tamaños: width: 280px; height: 331px; Commented el 31 jul. 2020 a las 17:34
  • ¿Se corta por arriba y por abajo dices? ¿O por dónde? ¿Podrías editar tu pregunta añadiendo una captura con ese efecto de corte que te sucede?
    – phpMyGuel
    Commented el 31 jul. 2020 a las 17:35
  • Si, se corta por arriba y por los lados, ya puse capturas Commented el 31 jul. 2020 a las 17:42

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.