Can't get slider to use 4 items?

Question

I have a slider that I've been trying to get working. It's demo was 3 slides, but I am trying to add 4. When I add it in, the 4 item is either

• In the back permanently
• Under the right-sides image

I'm not quite sure how I can fix this, if there is a way. To help describe what I'm looking for, imagine the below is my diagram:

        [back img] 
     
[left img]      [right img]
        
        [front img]

I am trying to make it so it revolves. Currently, you can see the front/left/right images, which is what I need, but you can also see the back image.

I essentially need the back image to be hidden, so whichever image is in that spot, hide it.

Here is the set up in HTML

<div class='p_slider'>
  <div class='p_slider__item'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch1.png'>
  </div>
  <div class='p_slider__item'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch2.png'>
  </div>
  <div class='p_slider__item'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch3.png'>
  </div>
  <div class='p_slider__item'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch3.png'>
  </div>
</div>

The positioning in CSS

.p_slider__item:nth-of-type(1) {
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
  left: -200px;
  -webkit-filter: blur(2px);
  opacity: 0.8;
  z-index: 1;
}
.p_slider__item:nth-of-type(2) {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  left: 0px;
  z-index: 2;
}
.p_slider__item:nth-of-type(3) {
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
  left: 200px;
  z-index: 1;
  -webkit-filter: blur(2px);
  opacity: 0.8;
}

.p_slider__item:nth-of-type(4) {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  left: 0px;
  z-index: 2;
}

I have quite a bit more code invested in this, but to keep it short, I also have this JS Fiddle Link. I know this is pretty custom work so I appreciate all the help I get! Thanks!

What I've Tried

updated fiddle with 4 items all moving here: DEMO

So I now have 4 items in rotation, but the slider wants to do this.

Slide front image to right

Slide left image to center

Slide (new center) img to Left and swap with that left

Slide (new center) to right, Slide Left to center

Answer 1

You can simplify the code for rotating by defining classes like left,right,front and back for the positions respectively and add and remove them to elements based on rotateLeft() or rotateRight() functions.

CSS:

.back
{
    -webkit-transform: scale(0.4);
     -ms-transform: scale(0.4);
        transform: scale(0.4);
    left:0px;   
    z-index: 1;
    -webkit-filter: blur(2px);
}
.front
{
    -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
      left: 0px;
      z-index: 3;
}
.left
{
    -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
    left: -200px;  
    opacity: 0.8;
    z-index: 2;
    -webkit-filter: blur(2px);
}
.right
{
      -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
      left: 200px;
      z-index: 2;
      -webkit-filter: blur(2px);
      opacity: 0.8;
}

JS:

// 3D Slider for Reece


on = 0;  // Init
time = 500; // Set the delay before the next click is accepted to 1 second

// Right
$('.right').click(function () {
    rotateRight(); // Call
    on = 1; // Set delay on
});

// Left
$('.left').click(function () {
    rotateLeft(); // Call
    on = 1; // Set delay on
});

play = setInterval(function () {
    rotateLeft()
}, 3000)

// Rotate left
function rotateLeft() {
    if (on == 0) {
        var frontElem = $('.p_slider__item.front');
        var leftElem = $('.p_slider__item.left');
        var backElem = $('.p_slider__item.back');
        var rightElem = $('.p_slider__item.right');

        frontElem.removeClass('front').addClass('left');
        leftElem.removeClass('left').addClass('back');
        backElem.removeClass('back').addClass('right');
        rightElem.removeClass('right').addClass('front');

        setTimeout(function () {
            on = 0; // Accept clicks again
        }, time)
    }
}

// Rotate right
function rotateRight() {
    if (on == 0) {
        var frontElem = $('.p_slider__item.front');
        var leftElem = $('.p_slider__item.left');
        var backElem = $('.p_slider__item.back');
        var rightElem = $('.p_slider__item.right');

        frontElem.removeClass('front').addClass('right');
        leftElem.removeClass('left').addClass('front');
        backElem.removeClass('back').addClass('left');
        rightElem.removeClass('right').addClass('back');

        setTimeout(function () {
            on = 0; // Accept clicks again
        }, time)
    }
}

$('.p_slider__item img').hover(function () {
    clearInterval(play)
})
$('.p_slider__item img').mouseenter(function () {
    $(this).animate({ 'top': '-14px' }, 300);
})
$('.p_slider__item img').mouseout(function () {
    $(this).stop(true, false).animate({ 'top': '0px' }, 300)
    play = setInterval(function () {
        rotateLeft()
    }, 3000)
})

JSFiddle: http://jsfiddle.net/pL03g26f/2/