I want to solve a problem.
I have banners that appear at regular intervals.
The data of which is written to the local storage.
In order not to show the banner that has already been shown on the next page.
But the problem is that the banner is shown on the next page with a delay that is indicated by it and not from scratch.
For example, 3 banners are shown on one page = this is 3 seconds
I need to make sure that when you go to the next page, the 4th banner starts showing immediately and not from the 4th sec., but immediately when the page is loaded.
Help me please. Thanks.
let item = $(".some__item");
item.each(function() {
var time = $(this).data('delay') * 1000;
var timeclose = time + 10000;
var itemId = $(this).data('id');
if (!localStorage.getItem(itemId)) {
setTimeout(() => {
$(this).fadeIn();
localStorage.setItem(itemId, time);
}, time);
setTimeout(() => {
$(this).fadeOut();
}, timeclose);
}
}).some__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-shadow: 0px 3px 32px 0px rgb(0 0 0 / 5%);
box-shadow: 0px 3px 32px 0px rgb(0 0 0 / 5%);
align-items: center;
background-color: #438842;
padding: 15px 45px;
padding-left: 10px;
position: relative;
margin-top: 15px;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="some__item" style="background-color: rgb(231, 161, 85); display: none;" data-delay="1" data-id="3123">Banner1</div>
<div class="some__item" style="background-color: rgb(231, 161, 85); display: none;" data-delay="2" data-id="3124">Banner2</div>
<div class="some__item" style="background-color: rgb(231, 161, 85); display: none;" data-delay="3" data-id="3125">Banner3</div>
<div class="some__item" style="background-color: rgb(231, 161, 85); display: none;" data-delay="4" data-id="3126">Banner4</div>
<div class="some__item" style="background-color: rgb(231, 161, 85); display: none;" data-delay="5" data-id="3127">Banner5</div>