Slider mensajes - Bsale-IO/template-docs GitHub Wiki

Componente por defecto en los templates

Código Componente Slider mensajes 
<!-- Opciones de íconos disponibles: 
     * truck (camión)
     * gift (regalo)
     * exclamation-circle (exclamación en círculo)
     * fire (fuego)
     * store (tienda) -->

<!-- Configuración de parámetros -->
{% assign icono_1 = "fire" %} <!-- Ícono para el primer mensaje -->
{% assign titulo_1 = "PRECIOS INMEJORABLES" %}
{% assign texto_1  = "Ofertas exclusivas y descuentos especiales todos los días." %}

{% assign icono_2 = "truck" %} <!-- Ícono para el segundo mensaje -->
{% assign titulo_2 = "ENVÍO GRATIS" %}
{% assign texto_2  = "En compras sobre $50.000" %}

{% assign icono_3 = "exclamation-circle" %} <!-- Ícono para el tercer mensaje -->
{% assign titulo_3 = "CALIDAD GARANTIZADA" %}
{% assign texto_3  = "Productos seleccionados con altos estándares." %}

<div class="mobile-contact-banner d-lg-none">
    <div class="container">
        <div class="slider-container">
            <div class="slider-track">
                <div class="slide">
                    <p class="mb-0"><i class='fas fa-{{ icono_1 }}'></i> <strong>{{ titulo_1 }}</strong> {{ texto_1 }}</p>
                </div>
                <div class="slide">
                    <p class="mb-0"><i class='fas fa-{{ icono_2 }}'></i> <strong>{{ titulo_2 }}</strong> {{ texto_2 }}</p>
                </div>
                <div class="slide">
                    <p class="mb-0"><i class='fas fa-{{ icono_3 }}'></i> <strong>{{ titulo_3 }}</strong> {{ texto_3 }}</p>
                </div>
            </div>
        </div>
    </div>
</div>
Código CSS Slider mensajes 
.mobile-contact-banner {
    width: 100%;
    font-size: 11px;
    line-height: 2;
    background: linear-gradient(240deg, #f3f3f3, #ffffff);
    border-top: 1px solid #f9f9f9;
    border-bottom: 1px solid #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    text-align: center;
}
.mobile-contact-banner .container {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 15px;
}
.slider-container {
   position: relative;
   overflow: hidden;
   height: auto;
   min-height: 40px;
}
.slider-track {
   animation: slide 15s linear infinite;
   display: flex;
   flex-direction: column;
}
.slide {
   height: auto;
   min-height: 40px;
   opacity: 0;
   position: absolute;
   width: 100%;
   animation: fadeInOut 15s infinite;
   white-space: normal;
   overflow: visible;
   text-overflow: clip;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 5px 0;
}
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 5s; }
.slide:nth-child(3) { animation-delay: 10s; }

.slide p {
   max-width: 100%;
   margin: 0;
   line-height: 1.4;
}

.mobile-contact-banner i {
   color: var(--primary-color);
   margin: 0 4px;
}

.mobile-contact-banner {
   color: var(--body-txt-default-color);
   text-decoration: none;
}

.mobile-contact-banner strong {
   color: #2d3748;
}

@keyframes fadeInOut {
   0%, 100% {
       opacity: 0;
       transform: translateY(40px);
   }
   3%, 30% {
       opacity: 1;
       transform: translateY(0);
   }
   33%, 100% {
       opacity: 0;
       transform: translateY(-40px);
   }
}

.slider-container:hover .slider-track {
   animation-play-state: paused;
}

@media (min-width: 992px) {
   .mobile-contact-banner {
       display: none;
   }
}

@media (max-width: 360px) {
   .mobile-contact-banner {
       font-size: 12px;
   }
   .container {
       padding: 0 8px;
   }
}
Código JavaScript Slider mensajes 
    // Verifica si estás en la página de inicio y muestra el slider de mensajes
    if (window.location.pathname === '/') {
        document.getElementById('slider-mensajes').style.display = 'block';
    }

Note

1.- el {{'Cabecera > Slider mensajes'| get_component }} se llama en la cabecera
2.- el código JavaScript se implementa en la cabecera, esa función es para que solamente se vea en el home y no en otra sección de la web

{{'Cabecera > Slider mensajes'| get_component }}

Instrucciones de su configuración

EL principio del componente tiene sus variables de configuración la cual son las siguientes:

{% assign icono_1 = "fire" %} <!-- Ícono para el primer mensaje -->
{% assign titulo_1 = "PRECIOS INMEJORABLES" %}
{% assign texto_1  = "Ofertas exclusivas y descuentos especiales todos los días." %}

{% assign icono_2 = "truck" %} <!-- Ícono para el segundo mensaje -->
{% assign titulo_2 = "ENVÍO GRATIS" %}
{% assign texto_2  = "En compras sobre $50.000" %}

{% assign icono_3 = "exclamation-circle" %} <!-- Ícono para el tercer mensaje -->
{% assign titulo_3 = "CALIDAD GARANTIZADA" %}
{% assign texto_3  = "Productos seleccionados con altos estándares." %}
⚠️ **GitHub.com Fallback** ⚠️