Is it possible to get the "Product Gallery" configuration?

composer require dynamicweb/swiffy-slider

Hi mahtab_alam, yes I installed the module but when using the configurator at https://swiffyslider.com/configuration/ there is no way I can create the "Product Gallery" from the example page at https://swiffyslider.com/examples/. It's exactly the gallery I need but can't create using a number of modules. Thanks.

Hello @AlfTheCat,

Hope this configuration helps.

Regards,
Abdel

Hi @AbdeI, thanks very much. However, this configuration renders the thumbnails, no main image.

What I'm looking for is exactly like this:

if you need the code src for that particular example, you can check the "Show code" at the bottom of the example :

<div class="col-12 col-lg-6" id="productGallery">
    <script>
        function imageClick(imageNumber) {
            setTimeout(() => {
                //Find the slider element
                const sliderElement = document.getElementById('pgalleryModal');
                //Slide to he right image
                swiffyslider.slideTo(sliderElement, imageNumber);
                //Listen to slide end and set focus to the container to enable keyboard navigation
                swiffyslider.onSlideEnd(sliderElement, () => sliderElement.querySelector(".slider-container").focus());
            }, 300)
        }

        function thumbHover(imageNumber) {
            //Find the slider element
            const sliderElement = document.getElementById('pgallery');
            //Slide to he right image
            swiffyslider.slideTo(sliderElement, imageNumber)
        }
    </script>
    <div class="swiffy-slider slider-item-ratio slider-item-ratio-1x1 slider-nav-round slider-nav-nodelay" id="pgallery">
        <ul class="slider-container">
            <li><img src="../assets/img/shoes/shoe1.webp" loading="lazy" alt="..." data-bs-toggle="modal" data-bs-target="#productGalleryModal" onclick="imageClick(0)"></li>
            <li><img src="../assets/img/shoes/shoe2.webp" loading="lazy" alt="..." data-bs-toggle="modal" data-bs-target="#productGalleryModal" onclick="imageClick(1)"></li>
            <li><img src="../assets/img/shoes/shoe3.webp" loading="lazy" alt="..." data-bs-toggle="modal" data-bs-target="#productGalleryModal" onclick="imageClick(2)"></li>
            <li><img src="../assets/img/shoes/shoe4.webp" loading="lazy" alt="..." data-bs-toggle="modal" data-bs-target="#productGalleryModal" onclick="imageClick(3)"></li>
            <li><img src="../assets/img/shoes/shoe5.webp" loading="lazy" alt="..." data-bs-toggle="modal" data-bs-target="#productGalleryModal" onclick="imageClick(4)"></li>
            <li><img src="../assets/img/shoes/shoe6.webp" loading="lazy" alt="..." data-bs-toggle="modal" data-bs-target="#productGalleryModal" onclick="imageClick(5)"></li>
        </ul>

        <button type="button" class="slider-nav" aria-label="Go previous"></button>
        <button type="button" class="slider-nav slider-nav-next" aria-label="Go next"></button>
    </div>

    <div class="swiffy-slider slider-nav-dark slider-nav-sm slider-nav-chevron slider-item-show4 slider-item-snapstart slider-item-ratio slider-item-ratio-1x1 slider-nav-visible slider-nav-page slider-nav-outside-expand pt-3 d-none d-lg-block">
        <ul class="slider-container" id="pgallerythumbs" style="cursor:pointer">
            <li><img src="../assets/img/shoes/shoe1.webp" loading="lazy" alt="..." onmouseover="thumbHover(0)"></li>
            <li><img src="../assets/img/shoes/shoe2.webp" loading="lazy" alt="..." onmouseover="thumbHover(1)"></li>
            <li><img src="../assets/img/shoes/shoe3.webp" loading="lazy" alt="..." onmouseover="thumbHover(2)"></li>
            <li><img src="../assets/img/shoes/shoe4.webp" loading="lazy" alt="..." onmouseover="thumbHover(3)"></li>
            <li><img src="../assets/img/shoes/shoe5.webp" loading="lazy" alt="..." onmouseover="thumbHover(4)"></li>
            <li><img src="../assets/img/shoes/shoe6.webp" loading="lazy" alt="..." onmouseover="thumbHover(5)"></li>
        </ul>

        <button type="button" class="slider-nav" aria-label="Go previous"></button>
        <button type="button" class="slider-nav slider-nav-next" aria-label="Go next"></button>
    </div>

    <div class="modal  fade" id="productGalleryModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-fullscreen">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="swiffy-slider h-100 slider-nav-dark" id="pgalleryModal">
                        <ul class="slider-container" tabindex="-1">
                            <li class="d-flex align-items-center justify-content-center"><img src="../assets/img/shoes/shoe1.webp" loading="lazy" class="mw-100 mh-100" alt="..." data-bs-dismiss="modal"></li>
                            <li class="d-flex align-items-center justify-content-center"><img src="../assets/img/shoes/shoe2.webp" loading="lazy" class="mw-100 mh-100" alt="..." data-bs-dismiss="modal"></li>
                            <li class="d-flex align-items-center justify-content-center"><img src="../assets/img/shoes/shoe3.webp" loading="lazy" class="mw-100 mh-100" alt="..." data-bs-dismiss="modal"></li>
                            <li class="d-flex align-items-center justify-content-center"><img src="../assets/img/shoes/shoe4.webp" loading="lazy" class="mw-100 mh-100" alt="..." data-bs-dismiss="modal"></li>
                            <li class="d-flex align-items-center justify-content-center"><img src="../assets/img/shoes/shoe5.webp" loading="lazy" class="mw-100 mh-100" alt="..." data-bs-dismiss="modal"></li>
                            <li class="d-flex align-items-center justify-content-center"><img src="../assets/img/shoes/shoe6.webp" loading="lazy" class="mw-100 mh-100" alt="..." data-bs-dismiss="modal"></li>
                        </ul>

                        <button type="button" class="slider-nav" aria-label="Go previous"></button>
                        <button type="button" class="slider-nav slider-nav-next" aria-label="Go next"></button>
                        <ul class="slider-indicators slider-indicators-dark slider-indicators-highlight slider-indicators-round">
                            <li class="active"></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Yeah I found that option, but no way to import that code into the configurator or anything like that. Anyway, thanks for your attention to the issue. I'll definitely use this module for other sliders, was just hoping I could easily create that beautiful product gallery :). I've tried 5 different modules by now, none of them seem to be able to do the job.

The "configurator" is actually just handling the functionality and is not designed to produce or affect code at all.

No need to get anywhere close to the suggested markup. We are using the swiffy views formatter for file and node bundles in different configurations.

In your case I'd start here:

• Create a view
• Use a suitable "rendered entity" display of your product - or build the required markup with fields
• Theme your views rows like desired (e. g. with CSS)
• Format the view with swiffy slider an use the above suggested 3-slide configuration
• You might want to hide the dash indicators via CSS

Setting this issue to "works as designed". Please don't feel backed down by this, it's just because this module was not designed to provide more than what you can configure over on the project page and apply that behavior to Drupal entities.

Feel free to get back here in case you need more hints.

Thanks @hexabinaer for the detailed replies. It's clear now.