www_aibox/templates/shortcodes/logo_slider.html
2025-02-12 06:59:33 +00:00

98 lines
3.0 KiB
HTML

{# <div class="flex space-x-12 justify-center">
<img loading="lazy" src="images/zictia_black.png" class="test" alt="Image 1" />
<img loading="lazy" src="images/vverse_black.png" class="test" alt="Image 2" />
<img loading="lazy" src="images/social_network_black.png" class="test" alt="Image 3" />
<img loading="lazy" src="images/vevrse_black.png" class="test" alt="Image 4" />
<img loading="lazy" src="images/sikana_black.png" class="test" alt="Image 5" />
<img loading="lazy" src="images/ourworld_black.png" class="test" alt="Image 6" />
<img loading="lazy" src="images/ict_black.png" class="test" alt="Image 7" />
<img loading="lazy" src="images/holochain_black.png" class="test" alt="Image 8" />
<img loading="lazy" src="images/temple_black.png" class="test" alt="Image 9" />
</div> #}
<div class="border-t-2 mb-6 border-gray-200"></div>
<div
x-data="{}"
x-init="$nextTick(() => {
let ul = $refs.logos;
ul.insertAdjacentHTML('afterend', ul.outerHTML);
ul.nextSibling.setAttribute('aria-hidden', 'true');
})"
class="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_128px,_black_calc(100%-128px),transparent_100%)]"
>
<ul x-ref="logos" class="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll">
<li>
<img src="images/zictia_black.png" alt="Facebook" />
</li>
<li>
<img src="images/vverse_black.png" alt="Disney" />
</li>
<li>
<img src="images/social_network_black.png" alt="Airbnb" />
</li>
<li>
<img src="images/vevrse_black.png" alt="Apple" />
</li>
<li>
<img src="images/ict_black.png" alt="Spark" />
</li>
<li>
<img src="images/holochain_black.png" alt="Samsung" />
</li>
<li>
<img src="images/sikana_black.png" alt="Quora" />
</li>
<li>
<img src="images/ourworld_black.png" alt="Sass" />
</li>
<li>
<img src="images/temple_black.png" alt="Sass" />
</li>
</ul>
<ul x-ref="logos" class="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll" aria-hidden="true">
<li>
<img src="images/zictia_black.png" alt="Facebook" />
</li>
<li>
<img src="images/vverse_black.png" alt="Disney" />
</li>
<li>
<img src="images/social_network_black.png" alt="Airbnb" />
</li>
<li>
<img src="images/vevrse_black.png" alt="Apple" />
</li>
<li>
<img src="images/ict_black.png" alt="Spark" />
</li>
<li>
<img src="images/holochain_black.png" alt="Samsung" />
</li>
<li>
<img src="images/sikana_black.png" alt="Quora" />
</li>
<li>
<img src="images/ourworld_black.png" alt="Sass" />
</li>
<li>
<img src="images/temple_black.png" alt="Sass" />
</li>
</ul>
</div>
<div class="border-t-2 mt-6 border-gray-200"></div>
<style>
ul {
list-style-type: none;
}
</style>