simple static image fadeshow

by rupesx

HTML

<div class="slidewrapper">
  <div class="slides">
    <ul>
      <li class="active" id="tab-1">Text 1 </li>
       <li id="tab-2">Text 2 </li>
        <li id="tab-3">Text 3 </li>
         <li id="tab-4">Text 4 </li>
          <li id="tab-5">Text 5 </li>
    </ul>
  </div>
  <div class="controls">
    <ul>
      <li class="active" data-slide="#tab-1"><span class="icon">icon 1 </span></li>
       <li data-slide="#tab-2"><span class="icon">icon 2 </span></li>
        <li data-slide="#tab-3"><span class="icon">icon 3 </span></li>
         <li data-slide="#tab-4"><span class="icon">icon 4 </span></li>
          <li data-slide="#tab-5"><span class="icon">icon 5 </span></li>
    </ul>
  </div>
  
</div>

CSS

*{
  margin:0;
  padding:0;
}
.slides{
  border:1px solid;
  height: 300px;
  width: 450px;
}
.slides li{
  display :none;
}
.slides li.active{
  display:block;
}

.controls li{
  color: #333;
  border: 1px solid #666;
  height: 50px;
  width: 50px;
  float: left;
  margin: 0 20px;
  list-style: none;
  cursor: pointer;
}

.controls li.active{
  color: #ff0000;
}

JavaScript

/*$(document).ready(function(){
var controls = $('.controls').find('li');
var	slides = $('slides').find('li');
	controls.on('click', function(){
    //console.log('test'+ this.innerHTML);
    $(this).siblings().removeClass('activeIcon');
    $(this).addClass('activeIcon');
    
    if ($(controls).hasClass('activeIcon')){
    	$(slides).siblings().removeClass('activeSlide');
      $(slides).addClass('activeSlide');
    }
   
  });
    $(controls).eq(0).click();
});*/


$(document).ready(function() {
    $(".controls li").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("activeIcon");
        $(this).parent().siblings().removeClass("activeIcon");
        var tab = $(this).attr("data-slide");
        $(".slides li").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
});