Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » slider, carousel o tira de productos para ecommerce

HTML - slider, carousel o tira de productos para ecommerce

Volver
Nuevo Tema
<<>>
 
Vista:

slider, carousel o tira de productos para ecommerce

Publicado por BrandonMart (6 intervenciones) el 09/08/2022 05:19:32
Hola, lo que pasa es que estoy creando una web Ecommerce y estoy intentando hacer una tira de productos en forma de carousel o slide no se bien como se le llama, La cosa es que la creo pero cuando al contenedor padre le doy un widht no me coge el overflow hidden y aparece todo reducido y además no quiero que el contenedor ocupe todo el ancho de la pantalla, la verdad es que prácticamente no se mucho de html y css, haber si alguien me puede ayudar, porfa de verdad se lo agradecería de corazón.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Ivan

slider, carousel o tira de productos para ecommerce

Publicado por Ivan (57 intervenciones) el 09/08/2022 11:04:00
Hola,

seria interesante ver el código HTML y CSS para ver dónde está el problema.
Pero aún sin verlo, creo que el problema es que el carrusel tiene un width: 80% (por ejemplo) y al colocarlo dentro de un contenedor padre, pues se reduce a ese 80% del contenedor padre. Supongo que si quitas el width del carrusel se soluciona.

Pero insisto, que sin ver el código no lo puedo asegurar.

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

slider, carousel o tira de productos para ecommerce

Publicado por BrandonMart (6 intervenciones) el 09/08/2022 16:30:51
la verdad es que no tengo mucho conocimineto sobre esto. En las ultimas lineas esta el codigo css, muchas gracias SALUDOS!

<section class="product-container"><!-- product-container Begin -->

<div class="product-carousel"><!-- product-carousel Begin -->

<div class="picture"><!-- picture Begin -->

<a href="detail.php"><img src="admin_area/product_images/inalambric-headphones.jpg" alt="inalambric-headphones"></a>

</div><!-- picture finish -->

<div class="details"><!-- details Begin -->

<h3>

<a href="details.php">
Inalambric Headphone Xiaomi
</a>

</h3>

<span>$45.00</span>

<div class="button-slider"><!-- button-slider Begin -->

<p class="star">
<strong >&star;</strong>
<strong >&star;</strong>
<strong >&star;</strong>
<strong >&star;</strong>
<strong >&star;</strong>
</p>
<a href="details.php" class="btn btn-default">View Details</a>
<a href="details.php" class="btn btn-primary">

<i class="fa fa-shopping-cart">
add To Cart
</i>

</a>

</div><!-- button-slider Finish -->

</div><!-- details Finish -->

</div><!-- product-carousel Finsh -->
<div class="product-carousel"><!-- product-carousel Begin -->

<div class="picture">

<a href="detail.php"><img src="admin_area/product_images/inalambric-headphones.jpg" alt="inalambric-headphones"></a>

</div>

<div class="details"><!-- details Begin -->

<h3>

<a href="details.php">
Inalambric Headphone Xiaomi
</a>

</h3>

<span>$45.00</span>

<div class="button-slider"><!-- button-slider Begin -->

<p class="star">
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
</p>
<a href="details.php" class="btn btn-default">View Details</a>
<a href="details.php" class="btn btn-primary">

<i class="fa fa-shopping-cart">
add To Cart
</i>

</a>

</div><!-- button-slider Finish -->

</div><!-- details Finish -->

</div><!-- product-carousel Finsh -->
<div class="product-carousel"><!-- product-carousel Begin -->

<div class="picture">

<a href="detail.php"><img src="admin_area/product_images/inalambric-headphones.jpg" alt="inalambric-headphones"></a>

</div>

<div class="details"><!-- details Begin -->

<h3>

<a href="details.php">
Inalambric Headphone Xiaomi
</a>

</h3>

<span>$45.00</span>

<div class="button-slider"><!-- button-slider Begin -->

<p class="star">
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
</p>
<a href="details.php" class="btn btn-default">View Details</a>
<a href="details.php" class="btn btn-primary">

<i class="fa fa-shopping-cart">
add To Cart
</i>

</a>

</div><!-- button-slider Finish -->

</div><!-- details Finish -->

</div><!-- product-carousel Finsh -->
<div class="product-carousel"><!-- product-carousel Begin -->

<div class="picture">

<a href="detail.php"><img src="admin_area/product_images/inalambric-headphones.jpg" alt="inalambric-headphones"></a>

</div>

<div class="details"><!-- details Begin -->

<h3>

<a href="details.php">
Inalambric Headphone Xiaomi
</a>

</h3>
<span>$45.00</span>

<div class="button-slider"><!-- button-slider Begin -->

<p class="star">
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
</p>
<a href="details.php" class="btn btn-default">View Details</a>
<a href="details.php" class="btn btn-primary">

<i class="fa fa-shopping-cart">
add To Cart
</i>

</a>

</div><!-- button-slider Finish -->

</div><!-- details Finish -->

</div><!-- product-carousel Finsh -->
<div class="product-carousel"><!-- product-carousel Begin -->

<div class="picture">

<a href="detail.php"><img src="admin_area/product_images/inalambric-headphones.jpg" alt="inalambric-headphones"></a>

</div>

<div class="details"><!-- details Begin -->

<h3>

<a href="details.php">
Inalambric Headphone Xiaomi
</a>

</h3>

<span>$45.00</span>

<div class="button-slider"><!-- button-slider Begin -->

<p class="star">
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
</p>
<a href="details.php" class="btn btn-default">View Details</a>
<a href="details.php" class="btn btn-primary">

<i class="fa fa-shopping-cart">
add To Cart
</i>

</a>

</div><!-- button-slider Finish -->

</div><!-- details Finish -->

</div><!-- product-carousel Finsh -->
<div class="product-carousel"><!-- product-carousel Begin -->

<div class="picture">

<a href="detail.php"><img src="admin_area/product_images/inalambric-headphones.jpg" alt="inalambric-headphones"></a>

</div>

<div class="details"><!-- details Begin -->

<h3>

<a href="details.php">
Inalambric Headphone Xiaomi
</a>

</h3>

<span>$45.00</span>

<div class="button-slider"><!-- button-slider Begin -->

<p class="star">
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
</p>
<a href="details.php" class="btn btn-default">View Details</a>
<a href="details.php" class="btn btn-primary">

<i class="fa fa-shopping-cart">
add To Cart
</i>

</a>

</div><!-- button-slider Finish -->

</div><!-- details Finish -->

</div><!-- product-carousel Finsh -->
<div class="product-carousel"><!-- product-carousel Begin -->

<div class="picture">

<a href="detail.php"><img src="admin_area/product_images/inalambric-headphones.jpg" alt="inalambric-headphones"></a>

</div>

<div class="details"><!-- details Begin -->

<h3>

<a href="details.php">
Inalambric Headphone Xiaomi
</a>

</h3>

<span>$45.00</span>

<div class="button-slider"><!-- button-slider Begin -->

<p class="star">
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
</p>
<a href="details.php" class="btn btn-default">View Details</a>
<a href="details.php" class="btn btn-primary">

<i class="fa fa-shopping-cart">
add To Cart
</i>

</a>

</div><!-- button-slider Finish -->

</div><!-- details Finish -->

</div><!-- product-carousel Finsh -->
<div class="product-carousel"><!-- product-carousel Begin -->

<div class="picture">

<a href="detail.php"><img src="admin_area/product_images/inalambric-headphones.jpg" alt="inalambric-headphones"></a>

</div>

<div class="details"><!-- details Begin -->

<h3>

<a href="details.php">
Inalambric Headphone Xiaomi
</a>

</h3>

<span>$45.00</span>

<div class="button-slider"><!-- button-slider Begin -->

<p class="star">
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
</p>
<a href="details.php" class="btn btn-default">View Details</a>
<a href="details.php" class="btn btn-primary">

<i class="fa fa-shopping-cart">
add To Cart
</i>

</a>

</div><!-- button-slider Finish -->

</div><!-- details Finish -->

</div><!-- product-carousel Finsh -->
<div class="product-carousel"><!-- product-carousel Begin -->

<div class="picture">

<a href="detail.php"><img src="admin_area/product_images/inalambric-headphones.jpg" alt="inalambric-headphones"></a>

</div>

<div class="details"><!-- details Begin -->

<h3>

<a href="details.php">
Inalambric Headphone Xiaomi
</a>

</h3>

<span>$45.00</span>

<div class="button-slider"><!-- button-slider Begin -->

<p class="star">
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
<strong>&star;</strong>
</p>
<a href="details.php" class="btn btn-default">View Details</a>
<a href="details.php" class="btn btn-primary">

<i class="fa fa-shopping-cart">
add To Cart
</i>

</a>

</div><!-- button-slider Finish -->

</div><!-- details Finish -->

</div><!-- product-carousel Finsh -->

<button class="arrow-prev"><i class="fas fa-angle-left"></i></button>
<button class="arrow-next"><i class="fas fa-angle-rigth"></i></button>

</section><!-- product-container Finish -->

CSS STYLES------------------------------------------------------------------------------------------------

.product-container{

display: inline-flex;
justify-content: space-around;
text-align: center;
box-sizing: border-box;
overflow: hidden;
margin:30px;

}

.product-carousel{

z-index: 20;
display: block;
width: 250px;
margin-left: 15px;
justify-content: center;
border: 1px solid #e6e6e6;
border-radius: 5px;
padding-bottom: 10px;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Ivan

slider, carousel o tira de productos para ecommerce

Publicado por Ivan (57 intervenciones) el 10/08/2022 21:46:48
Hola,

no está todo el código pero creo que me hago una idea.

Para empezar la estructura que tienes:

1
2
3
4
5
6
7
8
9
<section class="product-container"><!-- product-container Begin -->
  <div class="product-carousel"><!-- product-carousel Begin -->
  .. Aquí va un producto ...
  </div>
  <div class="product-carousel"><!-- product-carousel Begin -->
  .. Aquí va un producto ...
  </div>
  etc..
</section>

Entiendo que la quieres poner en tu propio espacio o contenedor contenedor con el ancho que tu quieres y entonces quedaría algo así:

1
2
3
4
5
6
7
8
9
10
11
<section class="miContainer">
  <div class="product-container"><!-- product-container Begin -->
    <div class="product-carousel"><!-- product-carousel Begin -->
    ... Aquí va un producto ...
    </div>
    <div class="product-carousel"><!-- product-carousel Begin -->
    ... Aquí va un producto ...
    </div>
    etc..
  </div>
</section>

Para que todo esto funcione al css le aplicas estos cambios:

1
2
3
4
5
6
7
8
9
10
11
12
13
.product-container {
	display: flex; /* Esta linea cambia */
	justify-content: space-around;
	text-align: center;
	box-sizing: border-box;
	overflow: hidden;
	margin: 30px;
	flex-wrap: wrap; /* Esta linea se añade */
}
/* Esta clase se añade a tu contenedor */
.miContainer {
  width: 60%; /* Pones el ancho que quieras */
}

Con esto en teoría el carrusel se muestra al ancho especificado en tu contenedor y los productos que no caben se añaden en lineas.

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

slider, carousel o tira de productos para ecommerce

Publicado por BrandonMart (6 intervenciones) el 19/08/2022 03:38:11
muchas gracias, de verdad te lo agradezco mucho, apenas miré el mensaje ya que no había podido verlo antes lo probare
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar