diff --git a/src/patterns/04-components/image-gallery/_image-gallery.scss b/src/patterns/04-components/image-gallery/_image-gallery.scss index e5c676a7607997d81e7440b5a2ecebbbac377e2e..635944a6bdabaeb84950a7b9336f1a4158cc722a 100644 --- a/src/patterns/04-components/image-gallery/_image-gallery.scss +++ b/src/patterns/04-components/image-gallery/_image-gallery.scss @@ -14,8 +14,14 @@ $size-xlarge: 7; &.active { display: flex; } + &.hide { + display: none; + } } .flickity-page-dots { + &.hide { + display: none; + } bottom: -2rem; .dot { height: var(--size-2); @@ -239,7 +245,7 @@ $size-xlarge: 7; } &[data-images-num="3"] { .uw-ig__item { - max-width: 32%; + max-width: 32.5%; } } &[data-images-num="4"] { diff --git a/src/patterns/04-components/image-gallery/image-gallery.js b/src/patterns/04-components/image-gallery/image-gallery.js index 3b53eb6de5128d03dcedf66022b6b411cdf4e3b1..788bc79feeceaa633acfad19a3916bdd93cee79e 100644 --- a/src/patterns/04-components/image-gallery/image-gallery.js +++ b/src/patterns/04-components/image-gallery/image-gallery.js @@ -8,7 +8,6 @@ Drupal.behaviors.imagegallery = { attach: function () { - // Ensure code runs after the DOM is fully loaded. $(document).ready(function () { @@ -30,6 +29,7 @@ contain: true, wrapAround: true, draggable: false, + imagesLoaded: true, groupCells: function () { // Adjust the number of visible images based on screen width. var width = $(window).width(); @@ -51,8 +51,13 @@ var flkty = $carousel.data('flickity'); // Handle keyboard navigation for Flickity pagination dots. - var dots = document.querySelectorAll('.uw-ig .flickity-page-dots .dot'); + var dots = $carousel.find('.flickity-page-dots .dot').toArray(); + // Hide the button wrapper if the number of dots equals imagesNum + if (dots.length === imagesNum) { + $(this).find('.uw-button--wrap').addClass('hide'); + $(this).find('.flickity-page-dots').addClass('hide'); + } if (!dots.length) { return; } @@ -82,11 +87,13 @@ // Previous button event listener. $('.uw-ig-button--previous').on('click', function () { + var $carousel = $(this).closest('.uw-ig').find('.carousel'); $carousel.flickity('previous'); }); // Next button event listener. $('.uw-ig-button--next').on('click', function () { + var $carousel = $(this).closest('.uw-ig').find('.carousel'); $carousel.flickity('next'); });