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 cantidad_slides = 3 %} <!-- Elige la cantidad de sliders visibles: Ajusta a 1, 2 o 3 según lo que necesites. -->

{% assign icono_1 = "fire" %}
{% assign titulo_1 = "PRECIOS INMEJORABLES" %}
{% assign texto_1  = "Ofertas exclusivas y descuentos especiales todos los días." %}

{% assign icono_2 = "truck" %}
{% assign titulo_2 = "ENVÍO GRATIS" %}
{% assign texto_2  = "En compras sobre $50.000" %}

{% assign icono_3 = "exclamation-circle" %}
{% assign titulo_3 = "CALIDAD GARANTIZADA" %}
{% assign texto_3  = "Productos seleccionados con altos estándares." %}

<div class="mobile-contact-banner d-lg-none slider-count-{{ cantidad_slides }}">
    <div class="container">
        <div class="slider-container">
            <div class="slider-track">
                {% if cantidad_slides >= 1 %}
                <div class="mcb-slide slide-1">
                    <p class="mb-0"><i class='fas fa-{{ icono_1 }}'></i> <strong>{{ titulo_1 }}</strong> {{ texto_1 }}</p>
                </div>
                {% endif %}

                {% if cantidad_slides >= 2 %}
                <div class="mcb-slide slide-2">
                    <p class="mb-0"><i class='fas fa-{{ icono_2 }}'></i> <strong>{{ titulo_2 }}</strong> {{ texto_2 }}</p>
                </div>
                {% endif %}

                {% if cantidad_slides >= 3 %}
                <div class="mcb-slide slide-3">
                    <p class="mb-0"><i class='fas fa-{{ icono_3 }}'></i> <strong>{{ titulo_3 }}</strong> {{ texto_3 }}</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
Código CSS Slider mensajes 
:root {
    /********************************************************************
    Cabecera Slider mensajes
    *********************************************************************/
    --mobile-contact-banner-bg: linear-gradient(240deg, #f3f3f3, #ffffff);
    --mobile-contact-banner-text: var(--body-txt-default-color);
    --mobile-contact-banner-title-color: #2d3748;
    --mobile-contact-banner-icon-color: var(--primary-color);

    /* Tamaños configurables */
    --mobile-contact-banner-font-size: 11px;
    --mobile-contact-banner-icon-size: 12px;
}
.mobile-contact-banner {
    width: 100%;
    font-size: var(--mobile-contact-banner-font-size);
    line-height: 2;
    background: var(--mobile-contact-banner-bg);
    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;
    color: var(--mobile-contact-banner-text);
    text-decoration: none;
}

.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 {
    display: flex;
    flex-direction: column;
}

.mcb-slide {
    height: auto;
    min-height: 40px;
    position: absolute;
    width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
    opacity: 0;
}

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

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

.mobile-contact-banner strong {
    color: var(--mobile-contact-banner-title-color);
}

/* Estilos para 1 slide */
.slider-count-1 .slide-1 {
    position: static;
    opacity: 1;
    transform: translateY(0);
    animation: none;
}

/* Estilos para 2 slides */
.slider-count-2 .slide-1 {
    animation: fadeInOut2 10s infinite;
    animation-delay: 0s;
}

.slider-count-2 .slide-2 {
    animation: fadeInOut2 10s infinite;
    animation-delay: 5s;
}

/* Estilos para 3 slides */
.slider-count-3 .slide-1 {
    animation: fadeInOut3 15s infinite;
    animation-delay: 0s;
}

.slider-count-3 .slide-2 {
    animation: fadeInOut3 15s infinite;
    animation-delay: 5s;
}

.slider-count-3 .slide-3 {
    animation: fadeInOut3 15s infinite;
    animation-delay: 10s;
}

@keyframes fadeInOut2 {
    0%, 100% {
        opacity: 0;
        transform: translateY(40px);
    }
    5%, 45% {
        opacity: 1;
        transform: translateY(0);
    }
    50%, 100% {
        opacity: 0;
        transform: translateY(-40px);
    }
}

@keyframes fadeInOut3 {
    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) {
    .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** ⚠️