APA Component Library

Card Slider 

<div x-data="{swiper: null}" x-init="const swiper = new Swiper($refs.container, {
    slidesPerView: 1.2,
    spaceBetween: 40,
    direction: 'horizontal', 
    loop: false,
    effect: 'slide',
    scrollbar: {
        el: '.swiper-scrollbar-custom',
        dragClass: 'swiper-scrollbar-drag-custom',
        draggable: true,
    },
    breakpoints: {
        768: {
            spaceBetween: 40,
            slidesPerView: 2.2,
        },
        1024: {
            spaceBetween: 40,
            slidesPerView: 2.2,
        },
        1200: {
            spaceBetween: 40,
            slidesPerView: 2.2,
        },
        1440: {
            spaceBetween: 40,
            slidesPerView: 2.2,
        }
    }
        })">
    <div class="swiper" x-ref="container">
        <div class="swiper-wrapper flex !ease-linear">
            <div class="swiper-slide !h-auto overflow-hidden relative">

                <a class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-700 aspect-square flex flex-col justify-between  transition-all hover:brightness-90 active:scale-95">
                    <div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
                    </div>

                    <div class="relative h-[55%]">

                        <div class="relative h-[80%] w-full ">
                            <img class="mx-auto h-full" src="/image/product.png" alt="" />

                        </div>
                    </div>

                    <div class="relative z-10 mt-auto">
                        <div class="text-white font-bold text-xl mb-2 xl:mb-4">
                            Montage- & Prüfautomaten für Stecker
                        </div>

                        <div>

                            <div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
                                Montageautomation
                            </div>

                            <div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
                                Prüfzellen
                            </div>
                        </div>
                    </div>

                    <div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">

                        <div class="p-4 bg-primary grid place-content-center ml-auto">

                            <span class="inline-flex items-center w-6 h-6  [&_*]:!stroke-white   ">
                                <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
                                    <path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                </svg>
                            </span>

                        </div>
                    </div>

                </a>
            </div>
            <div class="swiper-slide !h-auto overflow-hidden relative">

                <a class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-700 aspect-square flex flex-col justify-between  transition-all hover:brightness-90 active:scale-95">
                    <div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
                    </div>

                    <div class="relative h-[55%]">

                        <div class="relative h-[80%] w-full ">
                            <img class="mx-auto h-full" src="/image/product.png" alt="" />

                        </div>
                    </div>

                    <div class="relative z-10 mt-auto">
                        <div class="text-white font-bold text-xl mb-2 xl:mb-4">
                            Montage- & Prüfautomaten für Stecker
                        </div>

                        <div>

                            <div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
                                Montageautomation
                            </div>

                            <div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
                                Prüfzellen
                            </div>
                        </div>
                    </div>

                    <div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">

                        <div class="p-4 bg-primary grid place-content-center ml-auto">

                            <span class="inline-flex items-center w-6 h-6  [&_*]:!stroke-white   ">
                                <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
                                    <path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                </svg>
                            </span>

                        </div>
                    </div>

                </a>
            </div>
            <div class="swiper-slide !h-auto overflow-hidden relative">

                <a class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-700 aspect-square flex flex-col justify-between  transition-all hover:brightness-90 active:scale-95">
                    <div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
                    </div>

                    <div class="relative h-[55%]">

                        <div class="relative h-[80%] w-full ">
                            <img class="mx-auto h-full" src="/image/product.png" alt="" />

                        </div>
                    </div>

                    <div class="relative z-10 mt-auto">
                        <div class="text-white font-bold text-xl mb-2 xl:mb-4">
                            Montage- & Prüfautomaten für Stecker
                        </div>

                        <div>

                            <div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
                                Montageautomation
                            </div>

                            <div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
                                Prüfzellen
                            </div>
                        </div>
                    </div>

                    <div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">

                        <div class="p-4 bg-primary grid place-content-center ml-auto">

                            <span class="inline-flex items-center w-6 h-6  [&_*]:!stroke-white   ">
                                <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
                                    <path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                </svg>
                            </span>

                        </div>
                    </div>

                </a>
            </div>
            <div class="swiper-slide !h-auto overflow-hidden relative">

                <a class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-700 aspect-square flex flex-col justify-between  transition-all hover:brightness-90 active:scale-95">
                    <div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
                    </div>

                    <div class="relative h-[55%]">

                        <div class="relative h-[80%] w-full ">
                            <img class="mx-auto h-full" src="/image/product.png" alt="" />

                        </div>
                    </div>

                    <div class="relative z-10 mt-auto">
                        <div class="text-white font-bold text-xl mb-2 xl:mb-4">
                            Montage- & Prüfautomaten für Stecker
                        </div>

                        <div>

                            <div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
                                Montageautomation
                            </div>

                            <div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
                                Prüfzellen
                            </div>
                        </div>
                    </div>

                    <div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">

                        <div class="p-4 bg-primary grid place-content-center ml-auto">

                            <span class="inline-flex items-center w-6 h-6  [&_*]:!stroke-white   ">
                                <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
                                    <path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                </svg>
                            </span>

                        </div>
                    </div>

                </a>
            </div>
            <div class="swiper-slide !h-auto overflow-hidden relative">

                <a class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-700 aspect-square flex flex-col justify-between  transition-all hover:brightness-90 active:scale-95">
                    <div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
                    </div>

                    <div class="relative h-[55%]">

                        <div class="relative h-[80%] w-full ">
                            <img class="mx-auto h-full" src="/image/product.png" alt="" />

                        </div>
                    </div>

                    <div class="relative z-10 mt-auto">
                        <div class="text-white font-bold text-xl mb-2 xl:mb-4">
                            Montage- & Prüfautomaten für Stecker
                        </div>

                        <div>

                            <div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
                                Montageautomation
                            </div>

                            <div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
                                Prüfzellen
                            </div>
                        </div>
                    </div>

                    <div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">

                        <div class="p-4 bg-primary grid place-content-center ml-auto">

                            <span class="inline-flex items-center w-6 h-6  [&_*]:!stroke-white   ">
                                <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
                                    <path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                </svg>
                            </span>

                        </div>
                    </div>

                </a>
            </div>
            <div class="swiper-slide !h-auto overflow-hidden relative">

                <a class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-700 aspect-square flex flex-col justify-between  transition-all hover:brightness-90 active:scale-95">
                    <div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
                    </div>

                    <div class="relative h-[55%]">

                        <div class="relative h-[80%] w-full ">
                            <img class="mx-auto h-full" src="/image/product.png" alt="" />

                        </div>
                    </div>

                    <div class="relative z-10 mt-auto">
                        <div class="text-white font-bold text-xl mb-2 xl:mb-4">
                            Montage- & Prüfautomaten für Stecker
                        </div>

                        <div>

                            <div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
                                Montageautomation
                            </div>

                            <div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
                                Prüfzellen
                            </div>
                        </div>
                    </div>

                    <div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">

                        <div class="p-4 bg-primary grid place-content-center ml-auto">

                            <span class="inline-flex items-center w-6 h-6  [&_*]:!stroke-white   ">
                                <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
                                    <path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                </svg>
                            </span>

                        </div>
                    </div>

                </a>
            </div>
            <div class="swiper-slide !h-auto overflow-hidden relative">

                <a class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-700 aspect-square flex flex-col justify-between  transition-all hover:brightness-90 active:scale-95">
                    <div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
                    </div>

                    <div class="relative h-[55%]">

                        <div class="relative h-[80%] w-full ">
                            <img class="mx-auto h-full" src="/image/product.png" alt="" />

                        </div>
                    </div>

                    <div class="relative z-10 mt-auto">
                        <div class="text-white font-bold text-xl mb-2 xl:mb-4">
                            Montage- & Prüfautomaten für Stecker
                        </div>

                        <div>

                            <div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
                                Montageautomation
                            </div>

                            <div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
                                Prüfzellen
                            </div>
                        </div>
                    </div>

                    <div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">

                        <div class="p-4 bg-primary grid place-content-center ml-auto">

                            <span class="inline-flex items-center w-6 h-6  [&_*]:!stroke-white   ">
                                <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
                                    <path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                </svg>
                            </span>

                        </div>
                    </div>

                </a>
            </div>
        </div>

        <div class="pt-8 pb-5 lg:pt-10  ">
            <div class="swiper-scrollbar-custom w-full h-px bg-white">
            </div>
        </div>

    </div>
</div>
 
{% set cards = cards %}
{% set scrollbarColor = scrollbarColor|default('bg-white') %}
{% set hideScrollbar = hideScrollbar|default(false) %}
{% set NoPaddingScrollbar = NoPaddingScrollbar %}

{% set slidesPerViewSm = slidesPerViewSm|default('1.2') %}
{% set slidesPerViewMd = slidesPerViewMd|default('2.2') %}
{% set slidesPerViewLg = slidesPerViewLg|default('2.2') %}
{% set slidesPerViewXl = slidesPerViewXl|default('2.2') %}
{% set slidesPerViewXXl = slidesPerViewXXl|default('2.2') %}

{% set spaceBetweenSm = spaceBetweenSm|default('40') %}
{% set spaceBetweenMd = spaceBetweenMd|default('40') %}
{% set spaceBetweenLg = spaceBetweenLg|default('40') %}
{% set spaceBetweenXl = spaceBetweenXl|default('40') %}
{% set spaceBetweenXXl = spaceBetweenXXl|default('40') %}

{% set emptyCart = emptyCart|default(false) %}


{% if cards %}
<div x-data="{swiper: null}" x-init="const swiper = new Swiper($refs.container, {
    slidesPerView: {{ slidesPerViewSm }},
    spaceBetween: {{ spaceBetweenSm }},
    direction: 'horizontal', 
    loop: false,
    effect: 'slide',
    scrollbar: {
        el: '.swiper-scrollbar-custom',
        dragClass: 'swiper-scrollbar-drag-custom',
        draggable: true,
    },
    breakpoints: {
        768: {
            spaceBetween: {{ spaceBetweenMd }},
            slidesPerView: {{ slidesPerViewMd }},
        },
        1024: {
            spaceBetween: {{ spaceBetweenLg }},
            slidesPerView: {{ slidesPerViewLg }},
        },
        1200: {
            spaceBetween: {{ spaceBetweenXl }},
            slidesPerView: {{ slidesPerViewXl }},
        },
        1440: {
            spaceBetween: {{ spaceBetweenXXl }},
            slidesPerView: {{ slidesPerViewXXl }},
        }
    }
        })">
    <div class="swiper" x-ref="container">
        <div class="swiper-wrapper flex !ease-linear">
            {% if emptyCart %}
                <div class="swiper-slide !h-auto overflow-hidden relative hidden lg:block">
                </div>
            {% endif %}
            {% for item in cards %}
                <div class="swiper-slide !h-auto overflow-hidden relative">
                    {% render "@card" with {
                        title: item.title,
                        caption: item.caption,
                        style: item.style,
                        tags: item.tags,
                        tagPosition: item.tagPosition,
                        alignContent: item.alignContent,
                        link: item.link,
                        overlay: item.overlay,
                        afterTitle: item.afterTitle,
                        description: item.description
                    } %}
                </div>
            {% endfor %}
        </div>

        {% if hideScrollbar == false %}
            {% render '@swiper-scrollbar' with {
                bgColor: scrollbarColor,
                NoPaddingScrollbar: NoPaddingScrollbar
            } %}  
        {% endif %}       
    </div>
</div>
{% endif %}
 
{
  "NoPaddingScrollbar": false,
  "cards": [
    {
      "title": "Montage- & Prüfautomaten für Stecker",
      "style": "media-freehand",
      "tags": [
        {
          "title": "Montageautomation"
        },
        {
          "title": "Prüfzellen"
        }
      ]
    },
    {
      "title": "Montage- & Prüfautomaten für Stecker",
      "style": "media-freehand",
      "tags": [
        {
          "title": "Montageautomation"
        },
        {
          "title": "Prüfzellen"
        }
      ]
    },
    {
      "title": "Montage- & Prüfautomaten für Stecker",
      "style": "media-freehand",
      "tags": [
        {
          "title": "Montageautomation"
        },
        {
          "title": "Prüfzellen"
        }
      ]
    },
    {
      "title": "Montage- & Prüfautomaten für Stecker",
      "style": "media-freehand",
      "tags": [
        {
          "title": "Montageautomation"
        },
        {
          "title": "Prüfzellen"
        }
      ]
    },
    {
      "title": "Montage- & Prüfautomaten für Stecker",
      "style": "media-freehand",
      "tags": [
        {
          "title": "Montageautomation"
        },
        {
          "title": "Prüfzellen"
        }
      ]
    },
    {
      "title": "Montage- & Prüfautomaten für Stecker",
      "style": "media-freehand",
      "tags": [
        {
          "title": "Montageautomation"
        },
        {
          "title": "Prüfzellen"
        }
      ]
    },
    {
      "title": "Montage- & Prüfautomaten für Stecker",
      "style": "media-freehand",
      "tags": [
        {
          "title": "Montageautomation"
        },
        {
          "title": "Prüfzellen"
        }
      ]
    }
  ]
}

No notes defined.