How to show the some pixels of the next slide and or previous slide?

Question

I have created a very simple carousel slider, that you can check out here:

http://codepen.io/anon/pen/QjgvPj

Now I want to see some pixels of the next list item if the first slide is active, or if the second list item is active, I want to see some of the pixels from the previous one.

So this would look something like this, if your on the first slide:

The red bar on the right represent some of the pixels of the next slide

And if you are somewhere in the middle of the slides, you will see left and right the next and previous slide:

The two red bars on each side represents the previous and next slide

My basic setup is: HTML:

<div class="inner">
    <ul>
      <li>
        <a href="">
          <div>
            <img src="http://www.placehold.it/1000x420">
            <div><span>Spring Mountains</span></div>
          </div>
        </a>
      </li>
       <li>
        <a href="">
          <div>
            <img src="http://www.placehold.it/1000x420">
            <div><span>I Took this Yosemite</span></div>
          </div>
        </a>
      </li>
       <li>
        <a href="">
          <div>
            <img src="http://www.placehold.it/1000x420">
            <div><span>I Took El Capitan</span></div>
          </div>
        </a>
      </li>
      <li>
        <a href="">
          <div>
            <img src="http://www.placehold.it/1000x420">
            <div><span>Fourth</span></div>
          </div>
        </a>
      </li>
    </ul>  
  </div>

How do I achieve this? I look out for your answer. Thank you in advance.

UPDATE: This time with colorful photos!

http://codepen.io/anon/pen/QjgvPj

Answer 1

http://codepen.io/anon/pen/BoZZGQ

I add a class for the selected li , to change the z-index property and define who overlap the other.

javascirpt :

  var current = $('#carousel ul li').get(index);
  current.classList.add('active');
  if(lastOne)
    lastOne.classList.remove('active');
  lastOne = current;

css:

#carousel ul li{
  z-index: 1;
}
#carousel ul li.active{
  z-index: 0;
}

add negative margin to get the overlap:

#carousel ul li{
  margin-right: -50px
}

And update the offset : $('#carousel ul').animate({'margin-left': '-' + index*950});