Difficulty Creating an Infinite Anti-Clockwise Carousel using JavaScript

Question

I'm having quite a bit of trouble with this, and after working tirelessly on it I've decided to just post my problem on here. My boss wants me to figure out a problem with his org-board. The problem arises when the user wants to move from division 6 to division 7--instead of it going anti-clockwise to division 7, it rotates all the way back to division 6 going clockwise. I understand why it's doing this, but I haven't figured out how to make it go anti-clockwise to the next panel without having it rotate all the way back to division 7. I have a CodePen for it, figured it would be easier than posting a ton of code on here: https://codepen.io/jamesaluna/pen/gNRWNJ . If you're not quite sure what I'm trying to exactly do please ask me, thank you!

I tried creating an 'm' variable that calculated the amount of rotations, but that hasn't done much good. I also put the elements in an array and fiddled around with that a bit, using a for/in loop, but I have yet to figure out a solution using that.


var carousel = document.querySelector('.carousel');
    var cellCount = 7;
    var selectedIndex = 1;
    function rotateCarousel() {
      var angle = selectedIndex / cellCount * -360;
      carousel.style.transform = 'translateZ(-898px) rotateY(' + angle + 'deg)';


    }

    rotateCarousel();
    var sevenButton = document.querySelector('.seven-button');
    sevenButton.addEventListener( 'click', function() {
        var m =  Math.floor(selectedIndex / cellCount);
        selectedIndex = m + 1;
      if (selectedIndex == 7) {
        selectedIndex = 1 ;
      }
      rotateCarousel();
        document.getElementById("demo").innerHTML = m;
        document.getElementById("demo2").innerHTML = selectedIndex;
    });
    var oneButton = document.querySelector('.one-button');
    oneButton.addEventListener( 'click', function() {
        var m = Math.floor(selectedIndex / cellCount);
        selectedIndex = m + 2;
      rotateCarousel();
     document.getElementById("demo").innerHTML = m;
     document.getElementById("demo2").innerHTML = selectedIndex;
    });
    var twoButton = document.querySelector('.two-button');
    twoButton.addEventListener( 'click', function() {
        var m = Math.floor(selectedIndex / cellCount);
        selectedIndex = m + 3;
      rotateCarousel();
     document.getElementById("demo").innerHTML = m;
     document.getElementById("demo2").innerHTML = selectedIndex;
    });
    var threeButton = document.querySelector('.three-button');
    threeButton.addEventListener( 'click', function() {
        var m = Math.floor(selectedIndex / cellCount);
        selectedIndex = m + 4;
      rotateCarousel();
      document.getElementById("demo").innerHTML = m;
      document.getElementById("demo2").innerHTML = selectedIndex;
    });
    var fourButton = document.querySelector('.four-button');
    fourButton.addEventListener( 'click', function() {
        var m = Math.floor(selectedIndex / cellCount);
        selectedIndex = m + 5;
      rotateCarousel();
     document.getElementById("demo").innerHTML = m;
     document.getElementById("demo2").innerHTML = selectedIndex;
    });
    var fiveButton = document.querySelector('.five-button');
    fiveButton.addEventListener( 'click', function() {
        var m = Math.floor(selectedIndex / cellCount);
        selectedIndex = m + 6;
      rotateCarousel();
     document.getElementById("demo").innerHTML = m;
     document.getElementById("demo2").innerHTML = selectedIndex;
    });
    var sixButton = document.querySelector('.six-button');
    sixButton.addEventListener( 'click', function() {
        var m = Math.floor(selectedIndex / cellCount);
        selectedIndex = m + 7;
      rotateCarousel();
      if (selectedIndex == 7) {
        selectedIndex = 6 ;
      }
      document.getElementById("demo").innerHTML = m;
      document.getElementById("demo2").innerHTML = selectedIndex;
    }); 

``` CSS

.carousel__cell:nth-child(7n+3) { background: hsla( 360, 100%, 100%, 1); border: 2px solid #B754F7;} 
.carousel__cell:nth-child(7n+4) { background: hsla( 360, 100%, 100%, 1);border: 2px solid #FF91FF; }
.carousel__cell:nth-child(7n+5) { background: hsla( 360, 100%, 100%, 1);border: 2px solid #009C00; }
.carousel__cell:nth-child(7n+6) { background: hsla( 360, 100%, 100%, 1);border: 2px solid #999; }
.carousel__cell:nth-child(7n+7) { background: hsla( 360, 100%, 100%, 1);border: 2px solid #FFED8A;  }
.carousel__cell:nth-child(7n+1) { background: hsla( 360, 100%, 100%, 1); border: 2px solid #3A43F9; }
.carousel__cell:nth-child(7n+2) { background: hsla( 360, 100%, 100%, 1);  border: 2px solid #F4D100; }


.carousel__cell:nth-child(7) { transform: rotateY(  0deg) translateZ(1030px); }
.carousel__cell:nth-child(1) { transform: rotateY( 51.428deg) translateZ(1030px); }
.carousel__cell:nth-child(2) { transform: rotateY(102.856deg) translateZ(1030px); }
.carousel__cell:nth-child(3) { transform: rotateY(154.284deg) translateZ(1030px); }
.carousel__cell:nth-child(4) { transform: rotateY(205.712deg) translateZ(1030px); }
.carousel__cell:nth-child(5) { transform: rotateY(257.14deg) translateZ(1030px); }
.carousel__cell:nth-child(6) { transform: rotateY(308.568deg) translateZ(1030px); }

(1) In the codepen, why is Division7 to the left of Division1? (2) What do you want to happen when the user moves from Division7 to Division1 ? — cssyphus
– cssyphus, Commented Jun 24, 2019 at 17:27
It's my boss's choice, I really have no idea. He told me to just treat division 7 as if it's division 1, and when it goes from division 7 to division 1, it should just rotate anti-clockwise like it's doing. The problem is when you're on division 6 and you're trying to rotate back to division 7--it will just rotate all the way back clockwise. He wants it to continue rotating anti-clockwise — James Luna
– James Luna, Commented Jun 24, 2019 at 17:33
Okay, we get it. You want the carousel to endlessly rotate anti-clockwise. Understood. Someone will be working on this as we are able. — cssyphus
– cssyphus, Commented Jun 24, 2019 at 17:39

HBlackorby · Accepted Answer · 2019-06-24 17:47:58Z

1

It has to do with how high your angle of rotation is set and if it is negative or positive. When you get to 6, you have a high angle of rotation, and then to go 'back' to 7, it calculates a heavy rotation value for your angle. It sounds like what you want is to see which angle of rotation is the closest (forward or backwards) and go that direction. That way it won't always go backwards from 6 to 7 and instead go forwards if the ANGLE is closer (rather than the index.

To do that, modify your rotation function with a conditional like so:

function rotateCarousel() {
      var angle = selectedIndex / cellCount * -360;

    if (angle < -180)
      angle = angle % 360;

      carousel.style.transform = 'translateZ(-898px) rotateY(' + angle + 'deg)';


    }

That way if you're making a rotation that is more than half the full direction, it goes the other way instead. What you desire is to not make a rotation more than 180 deg (esp from 6 to 7, which is 300+ deg) if that makes sense. So we check and go the other direction around the circle instead.

answered Jun 24, 2019 at 17:47

HBlackorby

1,3361 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HBlackorby Over a year ago

This will also effect going from 6 to 1, so that it switches to a shorter rotation rather than all the way back to 1.

James Luna Over a year ago

Thank you so much for this solution, it works for getting from 6 to 7 seamlessly, the only issue I'm having here is that it makes the transition from division 5 to 6 go clockwise I believe. Ill play with it a bit but thank you so much for the help

Collectives™ on Stack Overflow

Difficulty Creating an Infinite Anti-Clockwise Carousel using JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related