Geek Answers Handbook

Can't get the slider to use 4 elements?

I have a slider that I tried to work. This demo had 3 slides, but I'm trying to add 4. When I add it, element 4 will either

  • On the back
  • Under the image of the right side

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 following is my diagram:

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

I'm trying to make it spin. You can currently see the front / left / right images that I need, but you can also see the inverse image.

Essentially, I need the reverse image to be hidden, so whatever image is in that place, hide it.

Here is the setup 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>

CSS positioning

 .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 a little more code nested into this, but to keep it short, I also have this JS Fiddle link . I know this is a pretty ordinary job, so I appreciate all the help I get! Thanks!

What i tried

updated 4-point violin, all moving here: DEMO

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

Move the front image to the right

Center left image

Move (new center) img to the left and replace it to the left

Move (new center) to the right, move left to center

+6
source share
1 answer

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

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/

+1
source

More articles:


All Articles