- Issue created by @AlfTheCat
- 🇹🇭Thailand AlfTheCat
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.
- 🇫🇷France abdei Paris, Ile de France
- 🇹🇭Thailand AlfTheCat
Hi @AbdeI, thanks very much. However, this configuration renders the thumbnails, no main image.
What I'm looking for is exactly like this:
- 🇫🇷France abdei Paris, Ile de France
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>
- 🇹🇭Thailand AlfTheCat
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.
- 🇩🇪Germany hexabinaer Berlin, Germany
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
- Status changed to Closed: works as designed
10 months ago 4:34pm 22 January 2024 - 🇩🇪Germany hexabinaer Berlin, Germany
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.
- 🇹🇭Thailand AlfTheCat
Thanks @hexabinaer for the detailed replies. It's clear now.