Bootstrap
Cant make a big carousel! #41971
Unanswered
valenurcullu
asked this question in
Q&A
Cant make a big carousel!
#41971
Replies: 1 comment
-
|
Please post a Codepen or Stackblitz or similar with your code so we can take a look and offer help. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Hi! I’ve been trying to build a carousel with Bootstrap. The problem is that I’ve tried many times and I can't make it bigger; I’ve even tried with several AIs and they couldn't do it either. Does anyone know why? Thanks!
html code:
<title>Naves Del Sur | Nosotros</title>`
style.css code: /* --- style.css --- /
:root {
/ Variables Naves Del Sur */
--brand-blue: #4481;
--brand-light: #00a8e8;
--brand-dark: #002a50;
}
body {
font-family: 'Roboto', sans-serif;
background-color: #f1f5f9;
padding-top: 0;
}
/* --- CLASES PERSONALIZADAS BOOTSTRAP --- */
.bg-custom-blue { background-color: var(--brand-blue) !important; }
.text-custom-blue { color: var(--brand-blue) !important; }
.text-custom-light { color: var(--brand-light) !important; }
/* Botones Generales */
.btn-primary {
background-color: var(--brand-blue);
border-color: var(--brand-blue);
padding: 10px 25px;
font-weight: 500;
}
.btn-primary:hover {
background-color: var(--brand-dark);
border-color: var(--brand-dark);
}
/* --- NAV BAR FLOTANTE (ESTILO CÁPSULA) --- /
header.custom-header {
background-color: transparent;
/ ABSOLUTE: Se queda quieta arriba y NO persigue al bajar /
position: absolute;
top: 20px;
width: 100%;
z-index: 1030;
pointer-events: none; / Permite clicks a los lados de la cápsula */
}
.custom-navbar {
background-color: var(--nav-bg);
color: var(--nav-text);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.7rem 2rem; /* Tamaño compacto /
width: 95%;
max-width: 1200px;
margin: 0 auto;
border-radius: var(--nav-radius);
box-shadow: var(--nav-shadow);
pointer-events: auto; / Reactiva clicks dentro de la barra */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Logo */
.custom-logo {
display: flex;
align-items: center;
text-decoration: none;
color: var(--nav-text);
font-weight: 700;
font-size: 1.2rem;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
}
.custom-logo:hover { color: var(--nav-text); }
.logo-img {
height: 35px;
width: auto;
margin-right: 10px;
}
/* Enlaces Desktop */
.custom-nav-links {
list-style: none;
display: flex;
gap: 1.5rem;
margin: 0;
padding: 0;
align-items: center;
}
.custom-nav-links li a {
text-decoration: none;
color: var(--nav-text);
font-size: 0.95rem;
font-weight: 500;
transition: color 0.3s ease;
position: relative;
padding: 5px 0;
}
.custom-nav-links li a:hover,
.custom-nav-links li a.active-link {
color: var(--nav-accent);
}
/* Punto indicador debajo del link */
.custom-nav-links li a::after {
content: '';
position: absolute;
width: 5px;
height: 5px;
background-color: var(--nav-accent);
border-radius: 50%;
bottom: -4px;
left: 50%;
transform: translateX(-50%) scale(0);
transition: transform 0.3s ease;
}
.custom-nav-links li a:hover::after,
.custom-nav-links li a.active-link::after {
transform: translateX(-50%) scale(1);
}
/* Botón Contacto */
.btn-nav-contacto {
background-color: var(--nav-accent);
color: var(--nav-bg) !important;
border: none;
padding: 6px 20px;
border-radius: 50px;
transition: all 0.3s ease;
font-weight: 600;
box-shadow: 0 4px 6px rgba(56, 189, 248, 0.3);
font-size: 0.9rem;
}
.btn-nav-contacto:hover {
background-color: #fff;
color: var(--nav-bg) !important;
transform: translateY(-1px);
}
/* Botón Hamburguesa Móvil */
.custom-menu-btn {
display: none;
color: var(--nav-text);
font-size: 1.5rem;
cursor: pointer;
background: none;
border: none;
}
/* Responsive */
@media (max-width: 991px) {
.custom-menu-btn { display: block; }
}
/* --- CORRECCIONES DE ESPACIADO Y TAMAÑOS --- */
/* 1. PORTADA PRINCIPAL (INDEX) /
.hero-section {
position: relative;
background: url('../imagenes/portada1.jpg') no-repeat center center/cover;
height: 85vh;
display: flex;
align-items: center;
/ Subimos el bloque para que el fondo quede detrás de la barra /
margin-top: -100px;
/ Padding MUY grande para bajar el texto y que no lo tape la barra */
padding-top: 180px;
}
.hero-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to bottom, rgba(15, 23, 42, 0.8), rgba(0, 68, 129, 0.6));
}
/* Tamaño de Títulos CORREGIDO (Más chicos) /
.hero-section h1.display-4 {
font-size: 3rem; / Reducido de 4.5 a 3 */
font-weight: 700;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
/* 2. CABECERAS INTERNAS (Páginas Secundarias) /
.page-header {
background: var(--brand-blue);
color: white;
/ Subimos el bloque /
margin-top: -100px;
/ Padding MUY grande arriba para destapar el título */
padding: 14rem 0 4rem 0;
margin-bottom: 3rem;
text-align: center;
}
/* Tamaño de Títulos Internos CORREGIDO /
.page-header h1 {
font-size: 2.5rem; / Reducido para que no sea gigante */
font-weight: 700;
margin-bottom: 0.5rem;
}
.page-header .lead {
font-size: 1.2rem;
opacity: 0.9;
}
/* Cards y Efectos */
.card { border: none; transition: transform 0.3s, box-shadow 0.3s; }
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; }
/* Clientes */
.client-logo {
filter: grayscale(100%);
opacity: 0.6;
transition: 0.3s;
max-height: 60px;
}
.client-logo:hover { filter: grayscale(0%); opacity: 1; }
/* --- ESTILOS CARRUSEL DE CLIENTES --- */
.slider-container {
overflow: hidden;
background: white;
padding: 20px 0;
position: relative;
width: 100%;
}
/* Sombra blanca a los costados para efecto de desvanecimiento */
.slider-container::before,
.slider-container::after {
background: linear-gradient(to right, white 0%, rgba(255,255,255,0) 100%);
content: "";
height: 100%;
position: absolute;
width: 100px;
z-index: 2;
top: 0;
}
.slider-container::after {
right: 0;
transform: rotateZ(180deg);
}
.slider-container::before {
left: 0;
}
/* La pista que se mueve /
.slide-track {
display: flex;
width: calc(250px * 14); / 250px por número total de logos duplicados /
animation: scroll 40s linear infinite; / 40s es la velocidad (más alto = más lento) */
}
.slide-track:hover {
animation-play-state: paused; /* Se detiene si pasas el mouse */
}
/* Cada logo individual /
.slide {
height: 100px;
width: 250px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px; / Espacio entre logos */
}
.slide img {
max-width: 100%;
max-height: 80px;
object-fit: contain;
/* Aseguramos que se vean a color */
filter: none !important;
transition: transform 0.3s ease;
}
.slide img:hover {
transform: scale(1.1); /* Pequeño zoom al pasar el mouse */
}
/* La animación matemática /
@Keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-250px * 7)); } / Debe ser la mitad del total de logos /
}
/ --- BOTÓN FLOTANTE DE WHATSAPP --- /
.btn-whatsapp {
position: fixed; / Se queda fijo al hacer scroll /
bottom: 30px; / Distancia desde abajo /
right: 30px; / Distancia desde la derecha /
width: 60px;
height: 60px;
background-color: #25d366; / Color oficial WhatsApp /
color: white;
border-radius: 50%; / Lo hace redondo /
text-align: center;
font-size: 35px; / Tamaño del icono /
box-shadow: 2px 2px 10px rgba(0,0,0,0.3); / Sombra para resaltar /
z-index: 1000; / Asegura que esté siempre encima de todo /
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s ease; / Suaviza la animación */
}
.btn-whatsapp:hover {
background-color: #128c7e; /* Color más oscuro al pasar el mouse /
transform: scale(1.1); / Crece un poquito /
color: white; / Mantiene el icono blanco */
}
/* Ajuste para celulares: un poco más chico y pegado al borde */
@media (max-width: 768px) {
.btn-whatsapp {
width: 50px;
height: 50px;
font-size: 28px;
bottom: 20px;
right: 20px;
}
}
/* Estilo para el botón de volver /
.back-link {
display: inline-flex; / Alinea flecha y texto perfectamente /
align-items: center; / Centra verticalmente /
color: rgba(255, 255, 255, 0.7); / Blanco con transparencia (parecido al text-white-50) /
text-decoration: none; / Sin subrayado por defecto /
font-weight: 600; / Letra un poco más gruesa (Semi-bold) /
font-size: 1.1rem; / Un pelín más grande para que se lea fácil /
transition: all 0.3s ease; / Suaviza el cambio de color */
}
/* Espacio entre la flecha y el texto /
.back-link i {
margin-right: 8px;
transition: transform 0.3s ease; / Suaviza el movimiento de la flecha */
}
/* EFECTO AL PASAR EL MOUSE (HOVER) /
.back-link:hover {
color: #ffffff; / Se vuelve blanco brillante /
text-decoration: none; / Nos aseguramos que no aparezca la línea */
}
/* Aquí está la magia: Mover la flecha a la izquierda */
.back-link:hover i {
transform: translateX(-5px);
}
/* --- ESTILOS DEL DROPDOWN --- */
/* 1. Preparamos el contenedor padre /
.dropdown-item {
position: relative; / Para que el menú se ubique respecto a este botón */
}
/* 2. El menú desplegable (Oculto por defecto) /
.dropdown-menu-hover {
display: none; / Oculto /
position: absolute; / Flotando sobre el contenido /
top: 100%; / Justo debajo del botón /
left: 0;
background-color: rgba(11, 28, 44, 0.95); / Color oscuro (azul noche) con transparencia /
min-width: 200px; / Ancho mínimo para que entren los textos /
list-style: none; / Sin puntitos /
padding: 10px 0;
margin: 0;
border-radius: 0 0 8px 8px; / Bordes redondeados abajo /
box-shadow: 0 8px 20px rgba(0,0,0,0.4); / Sombra elegante /
z-index: 1000; / Asegura que quede por encima de todo /
backdrop-filter: blur(5px); / Efecto difuminado moderno */
}
/* 3. Estilo de los enlaces dentro del menú /
.dropdown-menu-hover li a {
display: block; / Ocupa todo el ancho /
padding: 12px 20px;
color: rgba(255, 255, 255, 0.8) !important; / Blanco suave /
text-decoration: none;
font-size: 0.95rem;
border-bottom: 1px solid rgba(255,255,255,0.05); / Línea divisoria sutil */
transition: all 0.3s ease;
}
/* Quitar borde al último elemento */
.dropdown-menu-hover li:last-child a {
border-bottom: none;
}
/* 4. Efecto al pasar el mouse por las opciones /
.dropdown-menu-hover li a:hover {
background-color: #0d6efd; / Azul primario (Bootstrap) /
color: #ffffff !important;
padding-left: 25px; / Pequeño movimiento a la derecha */
}
/* 5. LA MAGIA: Mostrar el menú al pasar el mouse sobre "Productos" /
.dropdown-item:hover .dropdown-menu-hover {
display: block;
animation: fadeIn 0.3s ease; / Pequeña animación de entrada */
}
/* Animación suave */
@Keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.logo-limpio {
max-height: 70px;
width: auto;
/* Este filtro invierte el negro a blanco y quita el fondo de cuadraditos */
filter: invert(1) contrast(200%) brightness(1.2);
mix-blend-mode: screen;
}
/* Ajuste opcional para el carrusel /
.carousel-item img {
filter: brightness(0.9); / Para que el texto blanco de arriba se lea mejor */
}
Beta Was this translation helpful? Give feedback.
All reactions