<section class="deck deck-solid deck-collapse category-tile-carousel">
        <div class="content-wrapper collapse-bottom with-extra-left-gutter">
            <header class="deck-title">
                <h2 data-aos="fly-up">Explore more storage mathces</h2>
            </header>
            <div class="swiper-container swiper-hero" data-slides-per-view="auto" data-centered-slides="true" data-pagination="false"
                data-initial-slide="1" data-auto-height="true" data-loop="true">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide">
                        <a href="">
                            <figure class="image-holder">

                                <img src="${URLUtils.staticURL('/images/effect/carousel0.jpg')}" alt="Cultured" />
                            </figure>
                            <div class="swiper-slide__header-box">
                                <h3 class="">Cultured</h3>
                            </div>
                        </a>
                    </li>
                    <li class="swiper-slide">
                        <a href="">
                            <figure class="image-holder">
                                <img src="${URLUtils.staticURL('/images/effect/carousel1.jpg')}" alt="Enthusiastic" />
                            </figure>
                            <div class="swiper-slide__header-box">
                                <h3 class="">Enthusiastic</h3>
                            </div>
                        </a>
                    </li>
                    <li class="swiper-slide">
                        <a href="">
                            <figure class="image-holder">
                                <img src="${URLUtils.staticURL('/images/effect/carousel2.png')}" alt="inquisitive" />
                            </figure>
                            <div class="swiper-slide__header-box">
                                <h3 class="">Inquisitive</h3>
                            </div>
                        </a>
                    </li>
                    <li class="swiper-slide">
                        <a href="">
                            <figure class="image-holder">
                                <img src="${URLUtils.staticURL('/images/effect/carousel0.jpg')}" alt="inquisitive" />
                            </figure>
                            <div class="swiper-slide__header-box">
                                <h3 class="">Inquisitive</h3>
                            </div>
                        </a>
                    </li>
                    <li class="swiper-slide">
                        <a href="">
                            <figure class="image-holder">
                                <img src="${URLUtils.staticURL('/images/effect/carousel1.jpg')}" alt="inquisitive" />
                            </figure>
                            <div class="swiper-slide__header-box">
                                <h3 class="">Inquisitive</h3>
                            </div>
                        </a>
                    </li>
                </ul>
                <div class="swiper-pagination"></div>
                <a href="javascript:;" class="swiper-button-next">
                    <span class="visually-hidden">${Resource.msg('global.gonext', 'locale', null)}</span>
                </a>

                <a href="javascript:;" class="swiper-button-prev">
                    <span class="visually-hidden">${Resource.msg('global.goprevious', 'locale', null)}</span>
                </a>
            </div>
        </div>
    </section>