OffHealth component library

Slider 

<section class="n7-hero n7-background-primary-dark">
    <div class="2xl:container">
        <div id="n7HeroSlider">
            <!-- Slide start -->
            <!-- RP 240510 - Changed classes -->
            <div class="h-full">
                <!-- RP 240509 - Changed classes -->
                <!-- RP 240510 - Changed classes -->
                <div class="grid md:grid-cols-2 lg:grid-cols-2 items-center h-full">

                    <img src="../../images/hero-01.jpg" alt="" loading="lazy" class="image w-full h-64 md:h-full md:w-auto object-cover sm:object-contain md:object-cover" />

                    <!-- RP 240509 - Changed classes -->
                    <!-- RP 240510 - Changed classes -->
                    <div class="order-first py-6 sm:py-10 md:py-12 lg:py-20 xl:py-24">
                        <!-- RP 240322 - Changed classes -->
                        <!-- RP 240509 - Changed classes -->
                        <!-- RP 240510 - Changed classes -->
                        <div class="container md:max-w-2xl md:px-10 lg:px-16">
                            <h1 class=" n7-heading-3 xl:n7-heading-1 n7-content-inverse">
                                Innovare con un Occhio al Futuro
                            </h1>

                            <p class="n7-body-lg mt-3 xl:n7-body-xl md:mt-5 md:max-w-3xl n7-content-inverse">
                                OFFHEALTH si afferma come pioniera nell&#39;innovazione oftalmica. Uniamo passione e competenza per sviluppare prodotti e fornire servizi mirati a migliorare la qualità di vita dei pazienti.
                            </p>

                            <div class="mt-6 flex flex-wrap gap-y-4 gap-x-6">

                                <div class="flex-1 whitespace-nowrap">

                                    <a href="#" class="n7-btn 
    n7-btn--primary
    xl:n7-btn--l n7-btn--s">
                                        Scopri di più

                                        <svg class="inline-block align-middle fill-current w-4 h-4 ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1" aria-hidden="true" focusable="false" role="img">
                                            <use xlink:href="../../icons.svg#mini--arrow-right" />
                                        </svg>

                                    </a>

                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- Slide end -->
            <!-- Slide start -->
            <div class="h-full">
                <div class="grid md:grid-cols-2 lg:grid-cols-2 items-center h-full">

                    <img src="../../images/hero-02.jpg" alt="" loading="lazy" class="image w-full h-64 md:h-full md:w-auto object-cover sm:object-contain md:object-cover" />

                    <div class="order-first py-6 sm:py-10 md:py-12 lg:py-20 xl:py-24">
                        <!-- RP 240322 - Changed classes -->
                        <div class="container md:max-w-2xl md:px-10 lg:px-16">
                            <!-- <div class="container md:max-w-xl md:px-10 lg:px-12"> -->
                            <h1 class=" n7-heading-3 xl:n7-heading-1 n7-content-inverse">
                                Da oggi un’arma in piu’ per proteggerli dal sole e da fonti luminose dannose
                            </h1>

                            <p class="n7-body-lg mt-3 xl:n7-body-xl md:mt-5 md:max-w-3xl n7-content-inverse">
                                DRUSEN off collirio è una soluzione brevettata, utile a filtrare i raggi UV e la Luce Blu ed è un Dispositivo di Protezione Individuale (DPI)
                            </p>

                            <div class="mt-6 flex flex-wrap gap-y-4 gap-x-6">

                                <div class="flex-1 whitespace-nowrap">

                                    <a href="#" class="n7-btn 
    n7-btn--primary
    xl:n7-btn--l n7-btn--s">
                                        Scopri di più

                                        <svg class="inline-block align-middle fill-current w-4 h-4 ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1" aria-hidden="true" focusable="false" role="img">
                                            <use xlink:href="../../icons.svg#mini--arrow-right" />
                                        </svg>

                                    </a>

                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- Slide end -->
        </div>
    </div>
</section>
 
<section class="{% if class %}{{ class }}{% endif %}">
    <div class="2xl:container">
        <div id="n7HeroSlider">
            <!-- Slide start -->
<!-- RP 240510 - Changed classes -->
            <div class="h-full">
<!-- RP 240509 - Changed classes -->
<!-- RP 240510 - Changed classes -->
                <div class="grid md:grid-cols-2 lg:grid-cols-2 items-center h-full">
                    {% if slides.one.component %}
                        {% render '@' + slides.one.component.handle, slides.one.component.context|default({}), true %}
                    {% endif %}

<!-- RP 240509 - Changed classes -->
<!-- RP 240510 - Changed classes -->
                    <div class="{% if reverseOrder %}order-first{% endif %} py-6 sm:py-10 md:py-12 lg:py-20 xl:py-24">
                        <!-- RP 240322 - Changed classes -->
<!-- RP 240509 - Changed classes -->
<!-- RP 240510 - Changed classes -->
                        <div class="container md:max-w-2xl md:px-10 lg:px-16">
                            <h1 class="{% if slides.one.titleClass %} {{ slides.one.titleClass }}{% endif %}">
                                {{ slides.one.title | safe }}
                            </h1>
                            {% if slides.one.body %}
                                <p class="n7-body-lg mt-3 xl:n7-body-xl md:mt-5 md:max-w-3xl{% if bodyClass %} {{ bodyClass }}{% endif %}">
                                    {{ slides.one.body }}
                                </p>
                            {% endif %}
                            {% if slides.one.buttons.primary or slides.one.buttons.secondary %}
                                <div class="mt-6 flex flex-wrap gap-y-4 gap-x-6">
                                    {% if slides.one.buttons.primary %}
                                        <div class="flex-1 whitespace-nowrap">
                                            {% render '@button--size-s', slides.one.buttons.primary, true %}
                                        </div>
                                    {% endif %}
                                    {% if slides.one.buttons.secondary %}
                                        <div class="flex-1 whitespace-nowrap">
                                            {% render '@button--secondary', slides.one.buttons.secondary, true %}
                                        </div>
                                    {% endif %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <!-- Slide end -->
            <!-- Slide start -->
            <div class="h-full">
                <div class="grid md:grid-cols-2 lg:grid-cols-2 items-center h-full">
                    {% if slides.two.component %}
                        {% render '@' + slides.two.component.handle, slides.two.component.context|default({}), true %}
                    {% endif %}

                    <div class="{% if reverseOrder %}order-first{% endif %} py-6 sm:py-10 md:py-12 lg:py-20 xl:py-24">
                        <!-- RP 240322 - Changed classes -->
                        <div class="container md:max-w-2xl md:px-10 lg:px-16">
                        <!-- <div class="container md:max-w-xl md:px-10 lg:px-12"> -->
                            <h1 class="{% if slides.two.titleClass %} {{ slides.two.titleClass }}{% endif %}">
                                {{ slides.two.title | safe }}
                            </h1>
                            {% if slides.two.body %}
                                <p class="n7-body-lg mt-3 xl:n7-body-xl md:mt-5 md:max-w-3xl{% if bodyClass %} {{ bodyClass }}{% endif %}">
                                    {{ slides.two.body }}
                                </p>
                            {% endif %}
                            {% if slides.two.buttons.primary or slides.two.buttons.secondary %}
                                <div class="mt-6 flex flex-wrap gap-y-4 gap-x-6">
                                    {% if slides.two.buttons.primary %}
                                        <div class="flex-1 whitespace-nowrap">
                                            {% render '@button--size-s', slides.two.buttons.primary, true %}
                                        </div>
                                    {% endif %}
                                    {% if slides.two.buttons.secondary %}
                                        <div class="flex-1 whitespace-nowrap">
                                            {% render '@button--secondary', slides.two.buttons.secondary, true %}
                                        </div>
                                    {% endif %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <!-- Slide end -->
        </div>
    </div>
</section>
 
{
  "class": "n7-hero n7-background-primary-dark",
  "reverseOrder": true,
  "bodyClass": "n7-content-inverse",
  "slides": {
    "one": {
      "title": "Innovare con un Occhio al Futuro",
      "titleClass": "n7-heading-3 xl:n7-heading-1 n7-content-inverse",
      "body": "OFFHEALTH si afferma come pioniera nell'innovazione oftalmica. Uniamo passione e competenza per sviluppare prodotti e fornire servizi mirati a migliorare la qualità di vita dei pazienti.",
      "component": {
        "handle": "image",
        "context": {
          "src": "/images/hero-01.jpg",
          "class": "w-full h-64 md:h-full md:w-auto object-cover sm:object-contain md:object-cover"
        }
      },
      "buttons": {
        "primary": {
          "href": "#",
          "label": "Scopri di più",
          "classes": "xl:n7-btn--l",
          "icon": "mini--arrow-right"
        }
      }
    },
    "two": {
      "title": "Da oggi un’arma in piu’ per proteggerli dal sole e da fonti luminose dannose",
      "titleClass": "n7-heading-3 xl:n7-heading-1 n7-content-inverse",
      "body": "DRUSEN off collirio è una soluzione brevettata, utile a filtrare i raggi UV e la Luce Blu ed è un Dispositivo di Protezione Individuale (DPI)",
      "component": {
        "handle": "image",
        "context": {
          "src": "/images/hero-02.jpg",
          "class": "w-full h-64 md:h-full md:w-auto object-cover sm:object-contain md:object-cover"
        }
      },
      "buttons": {
        "primary": {
          "href": "#",
          "label": "Scopri di più",
          "classes": "xl:n7-btn--l",
          "icon": "mini--arrow-right"
        }
      }
    }
  }
}

Slider library: https://accessible360.github.io/accessible-slick/ (this library is based on jQuery).

Implementation needs loading of library files and slider activation in the main page HTML code
(see example in components/_preview.njk file).

In the HEAD of the page:

  • load slick.min.css
  • load accessible-slick-theme.min.css

At the bottom of the page:

  • load jquery-3.7.1.min.js
  • load slick.min.js
  • activate slick with jQuery as in _preview.njk
    $(document).ready(function() {
  $('#n7HeroSlider').slick(
      {
        ...
      }
  );
});