Is it possible to blazy the slides within a section like in a slideshow?

[rapgithub]

I am using https://github.com/DimitriMikadze/vanilla-slideshow that does not come with a lazy load
function it is a vanilla slideshow very clean and nice but it is missing lazy loading...

In my slideshow it will contain more than 100 hundreds of images in full screen and currently vainilla-slideshow load all images before showing them and that is the big problem with vanilla slideshow.

so I found blazy that seems to be what I need. I have made all this things to make it work but anyway all the bunch of images are being lazy loading and showing in the console.log before I click the next slide to show...

I just want the blazy to load only the next images when request or clicking next but it does not do that when all images are in the same section like in this case in a full screen slideshow like vanilla-slideshow ..

so my big question:

is there a change to blazy the slides within a section like in a slideshow and show only the first image and then the rest on request ?

I tried everything but it seems all the images the images contained in one section are blazy loaded
all .. and this is a big delay also that without using blazy like the problem before...

in my html code i have this below and all the images in the vanilla-slideshow div are being lazy loading all... and I do not want this..

any solution for slies that are within a section like for instace in a slideshow?
I have seen the that https://github.com/alvarotrigo/fullPage.js#lazy-loading has this feature onSlideLeave or onSlideLoad but it is not the script I need I like vanilla way js and I want use this clean and amazing blazy but i have this issue with slideshows...

Any solution how to handle this?

my html in the vanilla-slideshow looks like this

<div id="vanilla-slideshow">

<div class="vanilla-slide">
		<img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="uploads/2560x1600_01.jpg" alt="tiger">
		<!-- content here -->
	</div>

	<div class="vanilla-slide loading">
		<img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="uploads/2560x1600_02.jpg" alt="tiger">
		<!-- content here -->
	</div>
	
	<div class="vanilla-slide loading">
		<img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="uploads/2560x1600_03.jpg" alt="tiger">
		<!-- content here -->
	</div>
	
	<div class="vanilla-slide loading">
		<img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="uploads/2560x1600_04.jpg" alt="tiger">
		<!-- content here -->
	</div>

[rapgithub]

I found a good solution today that I think it will work for all the slideshows using the same section for the image content:

set your every slides to display: none; and then set the active slide to display: block; in your css
then in your js change the style to display:block for your next and previous slide like below calling after var bLazy = new Blazy(); to refresh the content.. :

document.querySelector('.slide-active').style.display = 'block';
var bLazy = new Blazy();

this worked excellent for me and now my console.log show only the first image only loaded and then the rest on click next...

having 54 megabytes in photos now I load 900 kbs first and then i go next and back without worries of waiting a lot of time...

I need only a pretty loader svg or gif to make it look more beautiful and easy loading :)
thanks to BLAZY
by the way I love vanilla JS no dependencies at all...
:)