Create a Lightweight Hyvä Static Slider with Tailwind and Alpine.js

This blog post dives into creating a sleek and lightweight custom static slider tailored for Hyvä themes. By leveraging the power of Tailwind CSS and Alpine.js, you’ll learn to design a visually appealing, fully responsive slider without relying on heavy libraries.

The guide is beginner-friendly, offering a step-by-step walkthrough, code snippets, and customization tips to match your eCommerce site’s unique style.

Code:

<div class=”static-slider bg-gray-200 container relative w-full overflow-hidden mb-4″>
    <div x-data=”{ activeSlide: 1, slideCount: 2 }” class=” overflow-hidden relative”>
        <div class=”relative flex flex-nowrap w-full transition-transform duration-500 ease-in-out”
            :style=”‘transform: translateX(-‘ + (activeSlide – 1) * 100 + ‘%)'”>
            <!– Slide 1 –>
            <div class=”flex shrink-0 w-full max-h-[250px] gap-x-4 space-x-2 slide-bx”>
                <div class=”w-1/4 slide-1″>
                    <img src=”image path” alt=”Hyvä Static Slider Image 1″ class=”w-full h-auto object-contain”>
                </div>
                <div class=”w-1/4 slide-2″>
                    <img src=”image path” alt=”Hyvä Static Slider Image 2″ class=”w-full h-auto object-contain”>
                </div>
                <div class=”w-1/4 slide-2″>
                    <img src=”image path” alt=”Hyvä Static Slider Image 3″ class=”w-full h-auto object-contain”>
                </div>
                <div class=”w-1/4 slide-2″>
                    <img src=”image path” alt=”Hyvä Static Slider Image 4″ class=”w-full h-auto object-contain”>
                </div>
            </div>
            <!– Slide 2 –>
            <div class=”flex shrink-0 w-full max-h-[250px] gap-x-4 space-x-2 slide-bx”>
                <div class=”w-1/4 slide-1″>
                    <img src=”image path” alt=”Hyvä Static Slider Image 5″ class=”w-full h-auto object-contain”>
                </div>
                <div class=”w-1/4 slide-2″>
                    <img src=”image path” alt=”Hyvä Static Slider Image 6″ class=”w-full h-auto object-contain”>
                </div>
                <div class=”w-1/4 slide-2″>
                    <img src=”image path” alt=”Hyvä Static Slider Image 7″ class=”w-full h-auto object-contain”>
                </div>
                <div class=”w-1/4 slide-2″>
                    <img src=”image path” alt=”Hyvä Static Slider Image 8″ class=”w-full h-auto object-contain”>
                </div>
            </div>
        </div>
        <!– Dots Navigation –>
        <div class=”absolute bottom-0 left-0 right-0 flex justify-center space-x-2 p-3 relative”>
            <template x-for=”slideIndex in slideCount” :key=”slideIndex”>
                <button @click=”activeSlide = slideIndex”
                    class=”shrink-0 block w-3 h-3 m-2 rounded-full shadow cursor-pointer”
                    :class=”{‘bg-yellow-500’: activeSlide === slideIndex, ‘bg-black’: activeSlide !== slideIndex}”></button>
            </template>
        </div>
    </div>
</div>

Output:

Conclusion:

Whether you’re enhancing user experience or just experimenting with Hyvä’s capabilities, this tutorial will help you craft a modern, fast-loading slider with ease. Perfect for Magento developers and enthusiasts!


Contributed by: Divya

Excellone Technologies boasts a dynamic Magento team with expertise in the latest eCommerce technologies. If you have an eCommerce project in mind, connect with us to turn your vision into a fully functional, high-performing online store.

Posted in Magento