Carousel Gallery

The gallery carousel shortcode allows to add a slider of images inside the page. You can change the type of navigation, set the images and assign to each a proper caption and alt text. Clicking on an image a popup showing the full-width version will be shown. Please find more details after the examples.

EX 1: Gallery with thumbnails navigation

A turquoise lake in the middle of the mountains - Mark Bustos - via Unsplash

Scoped custom properties can be used for fine-tuning

            
                  /*STAGE*/
.gallery_wrap.gallery_carousel.main{
    /*Maximum width;*/
    --max-widht: 1100px;
    /*Proportion of the stage;  both float numbers and fractions are supported*/
    --aspect-ratio: 16 / 9;
   /*Arrows visibility: 1 is visible, 0 is invisible*/
    --arrows: 1;
}

/*THUMBNAILS*/
.gallery_wrap.gallery_carousel.pager{
    /*Number of the thumbnails*/
    --c: 4;
    /*Proportion of the stage;  both float numbers and fractions are supported*/
    --aspect-ratio: 16 / 9;
    /*Border width of the current slide*/
    --border: 4px;
    /*Margin between slides*/
    --margin: 0px;
   /*Arrows visibility; 1 is visible, 0 is invisible*/
    --arrows: 1;
}

The custom properties can also be changed programmatically when an event occurs

dfdfedf

            
                  
//Vanilla
document.addEventListener('someEvent', function(e){

   const slider = document.querySelector('.main');
   const thumbs = document.querySelector('.pager');

   slider.style.setProperty('--arrows', '0', '');
   thumbs.style.setProperty('--arrows', '1', '');

});

//jQuery
(function ($) {
   $(window).on('someEvent', function(e){

      var slider = $('.main');
      var thumbs = $('.pager');

      slider.css({'--arrows' : '0'});
      thumbs.css({'--arrows' : '1'});

   });

})(jQuery);

            
                  🗂️ shortcodes
│
└───📁_shared
│   │
│   └─── 📁assets
│       │   
│       └─── 📁js
│       │     file112.txt
│       │   
│       └─── 📁css
│       │     file112.txt
│        
└───📁gallery_carousel
     │     file021.txt
     │ 
     └─── 📁assets
         │   
         └─── 📁js
         │     file112.txt
         │   
         └─── 📁css
         │     file112.txt

            
                  </code><script>alert('hacked')</script>