The problem is that the site has 3 DIV blocks; the background should change in turn, but I don鈥檛 really understand how to do this, as long as these are:

var event1=$('#event1'); var event2=$('#event2'); var event3=$('#event3'); var timerId = function () { var timerId1 = setTimeout(function tick() { if (event1.hasClass("event-achieve-img1")){ event1.toggleClass("imgchanged"); }else{ event1.toggleClass("imgchanged"); } timerId1 = setTimeout(tick, 2000); }, 2000); var timerId2 = setTimeout(function tick() { var i=0; if (event2.hasClass("event-achieve-img2")){ event2.toggleClass("imgchanged"); }else{ event2.toggleClass("imgchanged"); } timerId2 = setTimeout(tick, 4000); }, 4000); var timerId3 = setTimeout(function tick() { var i=0; if (event3.hasClass("event-achieve-img3")) { event3.toggleClass("imgchanged"); } else { event3.toggleClass("imgchanged"); } timerId3 = setTimeout(tick, 8000); }, 8000); }; timerId();

The idea is that the function in #id looks for a class where the background is specified, changes it to a class with a different background, but at this stage the background in the first DIV changes 4 times while in the second it changes 2a, etc. Tried to use clearTimeout(); but he stops setTimeout on deafly. HTML code: <div class="container d-flex flex-column text-center event"> <p><a name="event"></a></p> <h2>袦袝袪袨袩袪袠携孝袠携</h2> <p class="event-up">袧袗楔袠 小袨孝袪校袛袧袠袣袠 袨袘袝小袩袝效袠袥袠:</p> <div class=" d-flex flex-row justify-content-around"> <div class="d-flex align-items-center justify-content-center event-achieve"> <a class="event-achieve-img1" id="event1" href=""></a> <div class="event-achieve-text"> <h3>袘袨袥袝袝</h3> <h3> 70 袦袗孝效袝袡</h3> <p>袙 袪袗袦袣袗啸 袥袠袚袠 效袝袦袩袠袨袧袨袙</p> </div> </div> <div class="d-flex align-items-center justify-content-center event-achieve"> <a class="event-achieve-img2" id="event2" href=""> </a> <div class="event-achieve-text"> <h3>袘袨袥袝袝</h3> <h3>150 袦袗孝效袝袡</h3> <p>袙 袪袗袦袣袗啸 袥袠袚袠 袝袙袪袨袩蝎</p> </div> </div> <div class="d-flex align-items-center justify-content-center event-achieve"> <a class="event-achieve-img3" id="event3" href=""></a> <div class="event-achieve-text"> <h3>袘袨袥袝袝</h3> <h3>300</h3> <p>袣袨袧笑袝袪孝袨袙 袠 楔袨校</p> </div> </div> </div> <p class="event-down">小袥袝袛校挟些袠袡 楔袗袚:<span>袪袗袘袨孝袗 袧袗 效袦 2018</span></p> </div> <div class="container d-flex flex-column text-center event"> <p><a name="event"></a></p> <h2>袦袝袪袨袩袪袠携孝袠携</h2> <p class="event-up">袧袗楔袠 小袨孝袪校袛袧袠袣袠 袨袘袝小袩袝效袠袥袠:</p> <div class=" d-flex flex-row justify-content-around"> <div class="d-flex align-items-center justify-content-center event-achieve"> <a class="event-achieve-img1" id="event1" href=""></a> <div class="event-achieve-text"> <h3>袘袨袥袝袝</h3> <h3> 70 袦袗孝效袝袡</h3> <p>袙 袪袗袦袣袗啸 袥袠袚袠 效袝袦袩袠袨袧袨袙</p> </div> </div> <div class="d-flex align-items-center justify-content-center event-achieve"> <a class="event-achieve-img2" id="event2" href=""> </a> <div class="event-achieve-text"> <h3>袘袨袥袝袝</h3> <h3>150 袦袗孝效袝袡</h3> <p>袙 袪袗袦袣袗啸 袥袠袚袠 袝袙袪袨袩蝎</p> </div> </div> <div class="d-flex align-items-center justify-content-center event-achieve"> <a class="event-achieve-img3" id="event3" href=""></a> <div class="event-achieve-text"> <h3>袘袨袥袝袝</h3> <h3>300</h3> <p>袣袨袧笑袝袪孝袨袙 袠 楔袨校</p> </div> </div> </div> <p class="event-down">小袥袝袛校挟些袠袡 楔袗袚:<span>袪袗袘袨孝袗 袧袗 效袦 2018</span></p> </div>

  • I mean for each block there are several background-image and each block should have roughly a slider from these pictures, right? - Klimenkomud
  • Each block has its own 'background-image' in CSS, and yes, it should be like a slider. - Viktor Svinkin
  • So it may be better not to reinvent the wheel, and use exactly the slider? Or do you need an exclusively custom solution? - Klimenkomud
  • Can you throw what you do in html ? - Klimenkomud
  • It is possible and a slider, just what came to my mind and did it. - Viktor Svinkin

1 answer 1

If the use of the slider is not important, then you can use it, for example, I often use owl.carousel , a reference - Owl
In the case of this slider - everything is extremely simple, add it to the folder to your scripts and connect, everything is in the documentation. There will be questions - write, I will help. In your case, each block of yours is a slide (or if you want to change the background of this slide, then there is also a separate slider)

  • Thanks a lot, I'll try now. - Viktor Svinkin
  • @ViktorSvinkin You're welcome) - Klimenkomud