Interactive Banner Slider Plugin With jQuery - splits-slider

splits-slider is a small jQuery script to create a horizontal, responsive, interactive image slider that auto expands on mouse hover just like an accordion.

How to use it:

1. Create a list of images and then insert them into the banner slider.

<div class="banner-container">
  <ul class="ul-width" style="width: 16240px;">
    <li>
      <a href="#"><img src="1.png" alt=""></a>
      <span class="overlay"></span>     
    </li>
    <li>
      <a href="#"><img src="2.png" alt=""></a>   
      <span class="overlay"></span>
    </li>
    <li>
      <a href="#"><img src="3.png" alt=""></a>   
      <span class="overlay"></span>
    </li>
    <li>
      <a href="#"><img src="4.png" alt=""></a>   
      <span class="overlay"></span>
    </li>
    <li>
      <a href="#"><img src="5.png" alt=""></a>   
      <span class="overlay"></span>
    </li>
  </ul>
  <div class="clear"></div>
</div>

2. The basic CSS styles for the banner slider.

.banner-container {
  overflow: hidden;
  position: relative;/*width:1024px;
  margin:25px auto;*/
}

.banner-container ul { height: 639px; }

.banner-container li {
  float: left;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  z-index: 9;
}

.banner-container li a {
  display: block;
  padding: 0px;
  margin: 0px;
}

.banner-container li span.overlay {
  background: url(../images/bg-overlay.png) repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

3. The banner slider depends on the jQuery JavaScript library:

<script src="//code.jquery.com/jquery.min.js"></script>

4. The main JavaScript (jQuery script) to enable the banner slider.

$(window).load(function(){
  var sum=0;
  $('.banner-container li img').each(function(){ 
    sum += $(this).width();
  });
  $('.banner-container ul').width(sum);
});

$(function(){
  var winWidth = $(".banner-container").width();
  var ulWidthCount = 0;
  ulWidthCount = $('.banner-container li').size();
  $(".banner-container li").width(winWidth/ulWidthCount);
  $(".banner-container li").hover(function(){     
    ulWidthCount = $('.banner-container li').size();
    var imgWidth = $(this).find("img").width();
    var bannerLi = winWidth - imgWidth;
    var remWidth = ulWidthCount - 1;
    var appWidth = bannerLi/remWidth;
    $(".banner-container li").stop(true, false).animate({width: appWidth},700);
    $(this).stop(true, false).animate({width: imgWidth},700);
    $(this).find("span.overlay").stop(true, false).fadeOut();
  }, function(){
    $(this).animate({width: winWidth/ulWidthCount},700);
    $(".banner-container li").animate({width:winWidth/ulWidthCount},700);
    $(this).find("span.overlay").fadeIn();
  }); 
});

---

This awesome jQuery plugin is developed by anishmalias. For more Advanced Usages, please check the demo page or visit the official website.