Подскажите пожалуйста, как реализовать следующее есть блок, в котором находится карта, есть активные кнопки, которые пользователь нажимает и показывается другая карта (то есть сейчас реализованы обычные табы)
Как после 5ти секунд бездействия, обновить кусок кода в самое начало, чтобы показывало первую карту?
Пример кода ниже:
$(".tab_content").hide();
$(".tab_content:first").show();
/* if in tab mode */
$("ul.tabs li").click(function () {
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn();
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_drawer_heading").removeClass("d_active");
$(".tab_drawer_heading[rel^='" + activeTab + "']").addClass("d_active");
});
$(".tab_drawer_heading").click(function () {
$(".tab_content").hide();
var d_activeTab = $(this).attr("rel");
$("#" + d_activeTab).fadeIn();
$(".tab_drawer_heading").removeClass("d_active");
$(this).addClass("d_active");
$("ul.tabs li").removeClass("active");
$("ul.tabs li[rel^='" + d_activeTab + "']").addClass("active");
});
$("ul.tabs li").last().addClass("tab_last");
.locations {
display: flex;
}
.locations-gl__countries {
width: 500px;
}
.locations-gl__countries .countries__item {
font-size: 32px;
}
.locations-gl__countries .emea.active {
color: #8fc056;
}
.locations-gl__countries .asia.active {
color: #8a80ce;
}
.locations-gl__countries .america.active {
color: #f05633;
}
.locations-gl__countries .default {
display: none;
}
.locations-gl__map {
width: 500px;
}
.locations-gl__map .svg-map__item {
width: 400px;
height: 400px;
}
.locations-gl__map .svg-map__item img {
width: 100%;
height: 100%;
object-fit: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="locations">
<div class="locations-gl__countries">
<ul class="countries tabs">
<li class="countries__item default active" rel="tabs1"></li>
<li class="countries__item emea active" rel="tabs2">emea</li>
<li class="countries__item asia active" rel="tabs3">asia</li>
<li class="countries__item america active" rel="tabs4">america</li>
</ul>
</div>
<div class="locations-gl__map tab_container">
<div class="svg-map">
<div class="svg-map__item tab_content" id="tabs1">
<img src="https://images.unsplash.com/photo-1524661135-423995f22d0b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80" alt="">
<p>после 5ти секунд бездействия, должна снова быть активна первая картинка</p>
</div>
<div class="svg-map__item tab_content" id="tabs2">
<img src="https://images.unsplash.com/photo-1516738901171-8eb4fc13bd20?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
</div>
<div class="svg-map__item tab_content" id="tabs3">
<img src="https://images.unsplash.com/photo-1549272183-089192d12cd3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" alt="">
</div>
<div class="svg-map__item tab_content" id="tabs4">
<img src="https://images.unsplash.com/photo-1515861461225-1488dfdaf0a8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
</div>
</div>
</div>
</div>