layouts/shortcodes/home-banner.html

<!--< home-banner >-->

<div class="accordion" id="uiMobileContainer">
    {{range .Site.Data.index}}
    {{range $index, $element := .list}}
    {{$target := replace .name " " "" }}
    <div class="card">
        <div class="card-header">
            <div class="card-header-title"
                 data-toggle="collapse"
                 data-target="#{{$target}}"
                 {{if eq $index 0}}
                 aria-expanded="true"
                 {{else}}
                 aria-expanded="false"
                 {{end}}
                 aria-controls="{{$target}}"
            >
                {{.name}}
                <i class="dropdown-toggle"></i>
            </div>
        </div>
        <div id="{{$target}}"
             {{if eq $index 0}}
             class="collapse show"
             {{else}}
             class="collapse"
             {{end}}
             data-parent="#uiMobileContainer">
            <div class="card-body">
                <img class="img-item" loading="lazy" src="{{.img}}" alt="{{.name}}">
            </div>
        </div>
    </div>
    {{end}}
    {{end}}
</div>
<div class="container ui-container">
    <div class="banner-content-inner">
        <div class="banner-wrapper">
            {{range .Site.Data.index}}
            {{range .list}}
            <img class="img-item" loading="lazy" src="{{.img}}" alt="{{.name}}">
            {{end}}
            {{end}}
        </div>
    </div>
    <ul class="banner-nav">
        {{range .Site.Data.index}}
        {{range $index, $element := .list}}
        <li
                {{if eq $index 0}}
                class="active"
                {{end}}
        >
            {{.name}}
        </li>
        {{end}}
        {{end}}
    </ul>
</div>