0

I'm working on a Magento 2 Hyva Theme project and need to convert the default Media Gallery slider into a vertical slider. Currently, the slider displays images horizontally, but I want it to scroll vertically instead. Can someone provide guidance or point me in the right direction on how to achieve this customization within Hyva Theme Magento 2?

1 Answer 1

0

You need to adjust the CSS and possibly the HTML structure to make the thumbnails scroll vertically instead of horizontally. Here's what you can do:

<div id="thumbs"
 class="flex items-center flex-col" <!-- Updated -->
 :class="{ 'fixed justify-center bottom-0 left-0 right-0 mx-6': fullscreen }"
 style="min-height: 100px;"
 x-show="images.length > 1"
 x-cloak
<button
    type="button"
    aria-label="<?= $escaper->escapeHtmlAttr(__('Previous')) ?>"
    tabindex="-1"
    class="mr-4 text-black rounded-full outline-none focus:outline-none flex-none"
    :class="{ 'opacity-25 pointer-events-none' : activeSlide === 0, 'hidden' : !isSlider }"
    aria-hidden="true"
    @click="scrollPrevious"
><?= $heroicons->chevronUpHtml() ?></button> <!-- Updated -->
<div class="js_thumbs_slides thumbs-wrapper relative flex flex-col w-full overflow-auto js_slides snap md:px-1 xl:px-2" <!-- Updated -->
     x-ref="jsThumbSlides"
     @scroll.debounce="calcPageSize(); calcActive()"
>
    <template x-for="(image, index) in images" :key="index">
        <div class="js_thumbs_slide flex-shrink-0 mb-2 mr-2 lg:mr-4 last:mr-0">
            <button
                type="button"
                @click.prevent="setActive(index);"
                class="block border border-gray-300 hover:border-primary focus:border-primary"
                :class="{'border-primary': active === index}"
            >
                <span class="sr-only">
                    <?= $escaper->escapeHtml('View larger image') ?>
                </span>
                <img
                    :src="image.thumb"
                    :alt="hyva.str('%1 thumbnail', image.caption) || '<?= $escaper->escapeJs(__("%1 thumbnail", $productName)) ?>'"
                    :title="hyva.str('%1 thumbnail', image.caption) || '<?= $escaper->escapeJs(__("%1 thumbnail", $productName)) ?>'"
                    width="<?= /* @noEscape */ $smallWidth ?>"
                    height="<?= /* @noEscape */ $smallHeight ?>"
                />
            </button>
        </div>
    </template>
</div>
<button
    type="button"
    x-show="images.length > 1"
    x-cloak
    aria-label="<?= $escaper->escapeHtmlAttr(__('Next')) ?>"
    tabindex="-1"
    class="ml-4 text-black rounded-full outline-none focus:outline-none flex-none"
    :class="{ 'opacity-25 pointer-events-none' : activeSlide >= itemCount-pageSize, 'hidden' : !isSlider }"
    aria-hidden="true"
    @click="scrollNext"
><?= $heroicons->chevronDownHtml() ?></button> <!-- Updated -->

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.