Run jquery script on the same selector for multiple DIV. How should I act?

I have some containers Before after script
<div class="twentytwenty-container"> 
 <img src="before1.jpg">
 <img src="after1.jpg">
</div>
<div class="twentytwenty-container"> 
 <img src="before2.jpg">
 <img src="after2.jpg">
</div>
<div class="twentytwenty-container"> 
 <img src="before3.jpg">
 <img src="after3.jpg">
</div>


And the script function call of the plugin twentytwenty

$(".twentytwenty-container").twentytwenty({
 default_offset_pct: 0.5,
 no_overlay: true, 
 move_slider_on_hover: true, 
 move_with_handle_only: false, 
 click_to_move: false
});


because the challenge is one selector twentytwenty-container
it often happens that a loaded 1 and 2 block, and the third is not. After reloading the page - all sure.
And now, I visit them 10-15 pieces and constantly then 5, then 8, then 10, then multiple blocks not sure
How to write a script so that it checked the blocks in some kind of loop
that is, start them with a delay, for example, 200 MS, instead of all at once?
June 5th 19 at 21:13
3 answers
June 5th 19 at 21:15
var i = 0;
$(".twentytwenty-container").each(function () {
 setTimeout(function () {
$(this).twentytwenty({
 default_offset_pct: 0.5,
 no_overlay: true, 
 move_slider_on_hover: true, 
 move_with_handle_only: false, 
 click_to_move: false
});
 }, i * 200);

i++;
});
That is, there will zapcat the first block, then through, for example, 200 msec timer to look for and run the next one? Or is he on a timer after 200 MS all 10 units will start at the same time? - Russel_Dool commented on June 5th 19 at 21:18
One at a time with an interval of 200 MS. - aniya commented on June 5th 19 at 21:21
does not run the script )
The error console does not give ) - Russel_Dool commented on June 5th 19 at 21:24
June 5th 19 at 21:17
$(".twentytwenty-container").each(function() {
 var $this = $(this);

clearTimeout(timer);
 var timer = setTimeout(function() {
$this.twentytwenty({
 default_offset_pct: 0.5,
 no_overlay: true, 
 move_slider_on_hover: true, 
 move_with_handle_only: false, 
 click_to_move: false
});
 }, 200);
})
Something weird you have in your code is happening 0_o - Russel_Dool commented on June 5th 19 at 21:20
where? - aniya commented on June 5th 19 at 21:23
The timer variable will always be undefined in clearTimout. Why do clearTimout there? How is this different from what the author now, except that everything will be running on 200 MS later, but in the same time? - Russel_Dool commented on June 5th 19 at 21:26
June 5th 19 at 21:19
First you have to find the source of the error. Here error is not that you have many of the same classes, where it is necessary to initialize the script. No matter how many containers they should normally work.
The problem lies in the fact that the script may not work properly while in the block will not be uploaded image.
Check download image plugin like this:
imagesloaded
Already in kolbeco this plugin to initialize twentytwenty.

Find more questions by tags jQuery