Learning Learning - 1 month ago 5
HTML Question

Rotate Contents of two divs every 5 seconds. like banner rotation

I want to rotate two div's every 5 seconds (like banner rotation). second div should be hidden on page load and after 5 seconds second div should be visible and first div should hide.

<div class="banner-containner">
<div class="banner-wrapper">
<img src="http://placehold.it/200x300?text=Banner One">
<img src="http://placehold.it/200x60?text=Banner Base">
</div>
<div class="banner-wrapper">
<img src="http://placehold.it/200x300?text=Banner Two">
</div>
</div>


can we toggle div with class
banner-wrapper
every 5 seconds

JSFiddle example https://fiddle.jshell.net/n811x6fe/9/

Answer

I hope thats it what you need:

var $container = $('.banner-containner');
var $bannerWrappers = $container.find('.banner-wrapper');

var idx = 0;
setInterval(function() {
	if(idx === $bannerWrappers.length) {
  	idx = 0;
  }
  $bannerWrappers.hide().eq(idx).toggle();
  idx++;
}, 5000);
.banner-containner {
  max-width: 200px;
  height: auto;
 float:left;
  border: 1px solid #f00;
}
.banner-wrapper {
  float:left;
  width: 100%;
  height: auto;
  
}
.xbanner-wrapper img {
  position: relative;
  width: 100%;
  float: left;
}

.banner-wrapper:last-child{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner-containner">
  <div class="banner-wrapper">
    <img src="http://placehold.it/200x300?text=Banner One">
    <img src="http://placehold.it/200x60?text=Banner Base">
  </div>
  <div class="banner-wrapper">
    <img src="http://placehold.it/200x300?text=Banner Two">
  </div>
</div>

Or checkout jsfiddle.

Comments