change content automatically with jquery-CodePudding

I have several images that should change manually and automatically. I used jquery with click function for this. the click function works. However, the images should change automatically.

$(document).ready(function(){
    $('.tab-content').hide();
    $('.tab-content:first').show();
  $('.tabs-nav .wp-block-button__link').click(function() {
    let currentTab = $(this).attr('href');
    $('.tab-content').hide();
    $(currentTab).fadeIn();

    return false;
  });
});

body, html, .wrapper {
    width: 100%;
    height: 100%
}
#menu {
    position: absolute;
    z-index: 2;
    top: 20;
    right: 20
}
#content {
    margin: auto;
    height: 100%;
    width: max-content
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu" >
  <div ><a  href="#tab1">1</a></div>
  <div ><a  href="#tab2">2</a></div>
  <div ><a  href="#tab3">3</a></div>
</div>
<div >
  <div id="content">
  <img  id="tab1" style="display: none;height: 100%" src="https://dummyimage.com/640x360/fff/aaa" alt=""/> 
  <img  id="tab2" style="display: none;height: 100%" src="https://dummyimage.com/640x360/ccc/aaa" alt=""/> 
  <img  id="tab3" style="display: none;height: 100%" src="https://dummyimage.com/640x360/999/aaa" alt=""/> </div>
</div>

CodePudding user response：

$(document).ready(function(){
    $('.tab-content').hide();
    $('.tab-content:first').show();
  $('.tabs-nav .wp-block-button__link').click(function() {
       let currentTab = $(this).attr('href');
       var val = parseInt(currentTab.substr(4))
       test(val);    
  });
});
function test(val)
{ 
   $('.tab-content').hide();
   $("#tab" val).fadeIn();
   setTimeout(function() {
    val  =1;
    if(val < 4)
    {
      test(val);
    }else{
      test(1);
    }
   },5000);
}

body, html, .wrapper {
    width: 100%;
    height: 100%
}
#menu {
    position: absolute;
    z-index: 2;
    top: 20;
    right: 20
}
#content {
    margin: auto;
    height: 100%;
    width: max-content
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu" >
  <div ><a  href="#tab1">1</a></div>
  <div ><a  href="#tab2">2</a></div>
  <div ><a  href="#tab3">3</a></div>
</div>
<div >
  <div id="content">
  <img  id="tab1" style="display: none;height: 100%" src="https://dummyimage.com/640x360/fff/aaa" alt=""/> 
  <img  id="tab2" style="display: none;height: 100%" src="https://dummyimage.com/640x360/ccc/aaa" alt=""/> 
  <img  id="tab3" style="display: none;height: 100%" src="https://dummyimage.com/640x360/999/aaa" alt=""/> </div>
</div>

$(document).ready(function(){
    $('.tab-content').hide();
    $('.tab-content:first').show();
  $('.tabs-nav .wp-block-button__link').click(function() {
    let currentTab = $(this).attr('href');
    $('.tab-content').hide();
    $(currentTab).fadeIn();

    return false;
  });
});

body, html, .wrapper {
    width: 100%;
    height: 100%
}
#menu {
    position: absolute;
    z-index: 2;
    top: 20;
    right: 20
}
#content {
    margin: auto;
    height: 100%;
    width: max-content
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu" >
  <div ><a  href="#tab1">1</a></div>
  <div ><a  href="#tab2">2</a></div>
  <div ><a  href="#tab3">3</a></div>
</div>
<div >
  <div id="content">
  <img  id="tab1" style="display: none;height: 100%" src="https://dummyimage.com/640x360/fff/aaa" alt=""/> 
  <img  id="tab2" style="display: none;height: 100%" src="https://dummyimage.com/640x360/ccc/aaa" alt=""/> 
  <img  id="tab3" style="display: none;height: 100%" src="https://dummyimage.com/640x360/999/aaa" alt=""/> </div>
</div>

enter code here This should work though there is a dependency on name of id and number of div