CODEWITHSUNDEEP
javascriptjqueryarrayscarousel
Stefan
Stefan

Reputation: 55

I want to achieve rotation of cards by clicking of first and last element

I have a carousel of three cards, rotating on Y-axis and it works. When you click on button up it goes up and when you click on button down it goes down but I want to achieve that functionality like this. When you click top card it goes up and when you click on the bottom card it goes down. I can select the first div and it works but when you click on the first element it becomes second and so on and that is a problem. How to trigger rotation only on an element that is on top and on the bottom?

var cards = $("#carousel > .card"), Next, Previous,
    nexttransforms =[
        {y: '-55%', z: '-50px', scale: 0.8,},
        {y: '55%', z: '-50px', scale: 0.8,},
        {y: 0, z: 0, scale: 1,},
    ];
Next = function(){
    nexttransforms.push(nexttransforms.shift());
    for(i=0; i<cards.length; i++){
        var kartica = cards[i];
        $(kartica).css({
            'transform': 'translateY('+ nexttransforms[i].y +') translateZ(' + nexttransforms[i].z + ') scale(' + nexttransforms[i].scale+')',
        });

    }
};
Previous = function(){
    for(i=0; i<=cards.length-2; i++){
        nexttransforms.push(nexttransforms.shift());

    }
    for(i=0; i<cards.length; i++){
        var x = nexttransforms[i];
        var kartica = cards[i];
        $(kartica).css({'transform': 'translateY('+  x.y +') translateZ(' + x.z + ') scale(' + x.scale+')',
        });
     }
};
$('#down').on('click', function(){
    Previous();
});
$('#up').on('click', function(){
    Next();
});


<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
   <title></title>
    <link rel="stylesheet" href="css/style.css">
    <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
</head>
<body>
<div id="carousel">
  <div class="card">1</div>
  <div class="card">2</div>
    <div class="card">3</div>
</div>
<button id="up">Up</button>
<button id="down">Down</button>
<script  src="js/fix.js"></script>
</body>
</html>


#carousel {
    position: absolute;
    top: 40px;
    left: 200px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    opacity: 1;
}

.card {
    position: absolute;
    width: 200px;
    height: 200px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: 1s;
    background: black;
    -webkit-transform: translateY(-55%) translateZ(-50px) scale(0.8);
    transform: translateY(-55%) translateZ(-50px) scale(0.8);
}

.card:nth-child(3) {
    -webkit-transform: translateY(0) translateZ(0);
    transform: translateY(0) translateZ(0);
    background: #add8e6;
}

.card:nth-child(1) {
    -webkit-transform: translateY(-55%) translateZ(-50px) scale(0.8);
    transform: translateY(-55%) translateZ(-50px) scale(0.8);
    background: #ff7f50;
}

.card:nth-child(2) {
    -webkit-transform: translateY(55%) translateZ(-50px) scale(0.8);
    transform: translateY(55%) translateZ(-50px) scale(0.8);
    background: #7fff00;
}

So the end result would be, when you click on the top card it goes up and when you click on the bottom card it goes down and that should work endlessly.

Upvotes: 2

Views: 188

Answers (1)

Mikepote
Mikepote

Reputation: 6553

$(function(){


  $('.card').click(function(e){
    e.preventDefault();
    
    var thisCard = $(this);
    
    var topCard = $('.card.top');
    var midCard = $('.card.middle');
    var botCard = $('.card.bottom');
    
    if (thisCard.hasClass('top'))
    {
      topCard.removeClass('top').addClass('bottom');
      midCard.removeClass('middle').addClass('top');
      botCard.removeClass('bottom').addClass('middle');
    }
    else if (thisCard.hasClass('bottom'))
    {
      topCard.removeClass('top').addClass('middle');
      midCard.removeClass('middle').addClass('bottom');
      botCard.removeClass('bottom').addClass('top');
    }
  });




});
#carousel {
    position: absolute;
    top: 50px;
    left: 200px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    opacity: 1;
}

.card {
    position: absolute;
    width: 80px;
    height: 80px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: 1s;
    background: black;
    -webkit-transform: translateY(-55%) translateZ(-50px) scale(0.8);
    transform: translateY(-55%) translateZ(-50px) scale(0.8);
}

.card.middle {
    -webkit-transform: translateY(0) translateZ(0);
    transform: translateY(0) translateZ(0);
    background: #add8e6;
}

.card.top {
    -webkit-transform: translateY(-55%) translateZ(-50px) scale(0.8);
    transform: translateY(-55%) translateZ(-50px) scale(0.8);
    background: #ff7f50;
}

.card.bottom {
    -webkit-transform: translateY(55%) translateZ(-50px) scale(0.8);
    transform: translateY(55%) translateZ(-50px) scale(0.8);
    background: #7fff00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carousel">
  <div class="card top"></div>
  <div class="card middle"></div>
  <div class="card bottom"></div>
</div>

Upvotes: 2

Related Questions