UHasselt Component Library

App Procedure Card Slider 

<section class='org-procedure-slider'>
    <div class="atm-heading h2">Hoe wordt jouw melding verder verwerkt</div>

    <div class='card-slider'>
        <div class='swiper-container'>
            <div class='swiper-wrapper'>
                <div class='swiper-slide'>
                    <div class='mol-procedure-card'>
                        <div class='title'>
                            <div class='count'>1</div>
                            <h3 class="atm-heading ">Melding van afwezigheid</h3>
                        </div>
                        <div class='atm-paragraph '>
                            <p>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek.</p>
                        </div>

                    </div>
                </div>
                <div class='swiper-slide'>
                    <div class='mol-procedure-card'>
                        <div class='title'>
                            <div class='count'>2</div>
                            <h3 class="atm-heading ">Verwerking voor dienst onderwijs</h3>
                        </div>
                        <div class='atm-paragraph '>
                            <p>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek.</p>
                        </div>

                    </div>
                </div>
                <div class='swiper-slide'>
                    <div class='mol-procedure-card'>
                        <div class='title'>
                            <div class='count'>3</div>
                            <h3 class="atm-heading ">Communicatie inhaalexamen</h3>
                        </div>
                        <div class='atm-paragraph '>
                            <p>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek.</p>
                        </div>

                    </div>
                </div>
                <div class='swiper-slide'>
                    <div class='mol-procedure-card'>
                        <div class='title'>
                            <div class='count'>4</div>
                            <h3 class="atm-heading ">Melding van afwezigheid</h3>
                        </div>
                        <div class='atm-paragraph '>
                            <p>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek.</p>
                        </div>

                    </div>
                </div>
                <div class='swiper-slide'>
                    <div class='mol-procedure-card'>
                        <div class='title'>
                            <div class='count'>5</div>
                            <h3 class="atm-heading ">Afronden van afwezigheid</h3>
                        </div>
                        <div class='atm-paragraph '>
                            <p>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek.</p>
                        </div>

                    </div>
                </div>
            </div>
            <div class='swiper-pagination'></div>
        </div>
    </div>
</section>
 
<section class='org-procedure-slider'>
    {{render '@app-heading--h2' heading}}

    <div class='card-slider'>
        <div class='swiper-container'>
            <div class='swiper-wrapper'>
                {{#each cards}}
                    <div class='swiper-slide'>
                        {{render '@app-procedure-card' card}}
                    </div>
                {{/each}}
            </div>
            <div class='swiper-pagination'></div>
        </div>
    </div>
</section>
 
{
  "heading": {
    "text": "Hoe wordt jouw melding verder verwerkt",
    "tag": "div",
    "modifier": "h2"
  },
  "cards": [
    {
      "card": {
        "stap": "1",
        "heading": {
          "text": "Melding van afwezigheid"
        },
        "paragraph": {
          "text": "<p>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek.</p>"
        }
      }
    },
    {
      "card": {
        "stap": "2",
        "heading": {
          "text": "Verwerking voor dienst onderwijs"
        },
        "paragraph": {
          "text": "<p>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek.</p>"
        }
      }
    },
    {
      "card": {
        "stap": "3",
        "heading": {
          "text": "Communicatie inhaalexamen"
        },
        "paragraph": {
          "text": "<p>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek.</p>"
        }
      }
    },
    {
      "card": {
        "stap": "4",
        "heading": {
          "text": "Melding van afwezigheid"
        },
        "paragraph": {
          "text": "<p>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek.</p>"
        }
      }
    },
    {
      "card": {
        "stap": "5",
        "heading": {
          "text": "Afronden van afwezigheid"
        },
        "paragraph": {
          "text": "<p>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek.</p>"
        }
      }
    }
  ]
}
  • Content: 
    section.org-procedure-slider {
    @apply mb-16;

    .card-slider {
        @apply relative;

        .swiper-container {
            @apply pb-12;

            .swiper-wrapper {
                @apply h-auto;
            }

            .swiper-slide {
                @apply h-auto;
                @apply bg-white border border-solid border-gray shadow-xl;
            }

            .swiper-pagination {
                @apply bottom-0;

                &-bullet {
                    @apply bg-black opacity-100;

                    &-active {
                        @apply bg-red;
                    }
                }
            }
        }
    }
}
  • URL: /components/raw/app-procedure-slider/app-procedure-slider.css
  • Filesystem Path: src\components\09-app-organisms\app-procedure-slider\app-procedure-slider.css
  • Size: 693 Bytes
  • Content: 
    (function () {

    'use strict';

    var slider = document.querySelectorAll('.org-procedure-slider');

    for (var i = 0; i < slider.length; i++) {
        var swiperContainer = slider[i].querySelector('.swiper-container');

        new Swiper(swiperContainer, {
            watchOverflow: true,
            spaceBetween: 16,
            slidesPerView: 1,
            loop: false,
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
                clickable: true,
            },
            breakpoints: {
                1024: {
                    slidesPerView: 2.2,
                },
                1280: {
                    slidesPerView: 3.4,
                },
            },
            navigation: {
                nextEl: slider[i].querySelector('.swiper-next'),
                prevEl: slider[i].querySelector('.swiper-prev'),
            },
        });
    }
})();
  • URL: /components/raw/app-procedure-slider/app-procedure-slider.js
  • Filesystem Path: src\components\09-app-organisms\app-procedure-slider\app-procedure-slider.js
  • Size: 968 Bytes

No notes defined.