Rotating carousel in html, javascript issue

Question

When I put in a number in the form and submit, the carousel should always move forward and never backwards. Even if you go back to tile number 0. For instance: if you put in 39, and then 0. The carousel should move forward and not backwards.

I don't know if this is easy to fix. What I do know is that if I put in more than the cell amount. For instance: 40, 80, 120, 160. The carousel keeps moving forward.

For example when entering 10, the carousel should go forward to tile 10. When entering 20 is should go forward to position 20. But when standing on position 20 and entering position 10 it should go forward and do a loop forwards, not backwards. Because when you type: 39 and then 0 it does a loop and it just needs to move forward 1 tile.

Somebody who can helps me?

"use strict";

document.addEventListener('DOMContentLoaded', init);

    const carousel = document.querySelector('.carousel__list');
    const cells = carousel.querySelectorAll('.carousel__cell');

    const cellWidth = carousel.offsetWidth;
    const cellHeight = carousel.offsetHeight;
    const cellSize = cellHeight;
    const cellCount = 40;

    const radius = Math.round((cellSize / 2) / Math.tan(Math.PI / cellCount));
    const theta = 360 / cellCount;

    let selectedIndex = 0;

function init()
{
    initCarousel();
    document.querySelector('form').addEventListener('submit',rotateCarousel);
}

function initCarousel() {    
    for(let i = 0; i < cells.length; i++) {
        const cell = cells[i];
        const cellAngle = theta * i;
        cell.style.transform = 'rotateX(' + -cellAngle + 'deg) translateZ(' + radius + 'px)';
    }
    rotateCarousel();
}


function rotateCarousel() {
    console.log(document.querySelector('#tile').value);
    selectedIndex = document.querySelector('#tile').value;
    const angle = theta * selectedIndex * -1;
    carousel.style.transform = 'translateZ(' + -radius + 'px) ' + 'rotateX(' + -angle + 'deg)';
    
    const cellIndex = selectedIndex < 0 ? (cellCount - ((selectedIndex * -1) % cellCount)) : (selectedIndex % cellCount);
    
    const cells = document.querySelectorAll('.carousel__cell');
    cells.forEach((cell, index) => {
        if(cellIndex === index) {
            if(!cell.classList.contains('selected'))
                cell.classList.add('selected');
        }
        else {
            if(cell.classList.contains('selected')) {
                cell.classList.remove('selected');
            }
        }
    });
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #444;
}

a, a:visited, a:active {
    color: inherit;
}

.header {
    margin: 0.67em 0;
    color: goldenrod;
    background-color: #444444DD;
    border: 3px solid goldenrod;
    border-radius: 10px;
    padding: 10px;
    width: 550px;
    max-width: 95vw;
    z-index: 2;
}

.footer {
    color: goldenrod;
    height: 50px;
    line-height: 50px;
}

.title {
    font-size: 2em;
    font-weight: bold;
}

.subtitle {
    font-size: 0.83em;
    font-weight: bold;
}

.song__title, .song__year, .song__artist {
    display: block;
}

.carousel {
    display: flex;
    align-items: center;
    position: relative;
    padding: 130px 0;
}

.carousel__scene {
    position: relative;
    width: 510px;
    height: 460px;
    max-width: 95vw;
    padding-top: 150px;
    perspective: 100px;
    /*overflow: hidden;*/
}

.carousel__controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    position: absolute;
    right: 15px;
}

.previous-button, .next-button {
    margin: 5px 0;
    padding: 5px;
    width: 50px;
    height: 50px;
    font-family: monospace;
    font-weight: bold;
    font-size: 2rem;
    border: 3px solid goldenrod;
    border-radius: 10px;
    background-color: #444;
}

.previous-button:focus, .next-button:focus {
    outline: none;
    box-shadow: 0 0 6px 3px goldenrod;
}

.carousel__list {
    width: 100%;
    height: 160px;
    margin: 0;
    padding: 0;
    position: absolute;
    transform: translateZ(-288px);
    transform-style: preserve-3d;
    transition: transform 1s;
    list-style: none;
    counter-reset: list-counter;
}

.carousel__cell {
    position: absolute;
    width: 490px;
    height: 140px;
    max-width: calc(95vw - 20px);
    left: 10px;
    top: 10px;
    border: 2px solid white;
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    text-align: center;
    transition: transform 1s, opacity 1s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    counter-increment: list-counter;
    background-color: rgba(128, 128, 128, 0.75);
    /*filter: blur(2px);*/
}

.carousel__cell::before {
    content: counter(list-counter);
    color: white;
    text-shadow: 2px 2px black;
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.carousel__cell.selected {
    color: goldenrod;
    border-color: goldenrod;
    border-width: 5px;
    /*filter: none;*/
}

.carousel__cell.selected::before {
    color: goldenrod;
}

.carousel__cell:nth-child(1) { transform: rotateX(  0deg) translateZ(288px); }
.carousel__cell:nth-child(2) { transform: rotateX( 40deg) translateZ(288px); }
.carousel__cell:nth-child(3) { transform: rotateX( 80deg) translateZ(288px); }
.carousel__cell:nth-child(4) { transform: rotateX(120deg) translateZ(288px); }
.carousel__cell:nth-child(5) { transform: rotateX(160deg) translateZ(288px); }
.carousel__cell:nth-child(6) { transform: rotateX(200deg) translateZ(288px); }
.carousel__cell:nth-child(7) { transform: rotateX(240deg) translateZ(288px); }
.carousel__cell:nth-child(8) { transform: rotateX(280deg) translateZ(288px); }
.carousel__cell:nth-child(9) { transform: rotateX(320deg) translateZ(288px); }




  
  CodePen - Infinite rotating carousel with 100 list items (#cpc-100-list)
  
  





    All-Time Top 100 Songs
    (Source: www.billboard.com)


    
        
            
            The Twist1960Chubby Checker
            Smooth1999Santana Feat. Rob Thomas
            Mack the Knife1959Bobby Darin
            Uptown Funk!2015Mark Ronson Feat. Bruno Mars
            How Do I Live1997Leann Rimes
            Party Rock Anthem2011LMFAO Feat. Lauren Bennett & GoonRock
            I Gotta Feeling2009The Black Eyed Peas
            Macarena (Bayside Boys Mix)1996Los Del Rio
            Shape of You2017Ed Sheeran
            Physical1981Olivia Newton-John
            You Light Up My Life1977Debby Boone
            Hey Jude1968The Beatles
            Closer2016The Chainsmokers Feat. Halsey
            We Belong Together2005Mariah Carey
            Un-Break My Heart1996Toni Braxton
            Yeah!2004Usher Feat. Lil Jon & Ludacris
            Bette Davis Eyes1981Kim Carnes
            Endless Love1981Diana Ross & Lionel Richie
            Tonight’s the Night (Gonna Be Alright)1976Rod Stewart
            You Were Meant for Me/Foolish Games1997Jewel
            (Everything I Do) I Do It for You1991Bryan Adams
            I’ll Make Love to You1994Boyz II Men
            The Theme From “A Summer Place”1960Percy Faith & His Orchestra
            Le Freak1978Chic
            How Deep Is Your Love1977Bee Gees
            Eye of the Tiger1982Survivor
            We Found Love2011Rihanna Feat. Calvin Harris
            Low2008Flo Rida Feat. T-Pain
            Just Want to Be Your Everything1977Andy Gibb
            Too Close1998Next
            Every Breath You Take1983The Police
            Somebody That I Used to Know2012Gotye Feat. Kimbra
            Despacito2017Luis Fonsi & Daddy Yankee Feat. Justin Bieber
            Flashdance … What a Feeling1983Irene Cara
            Rolling in the Deep2011Adele
            Tossin’ and Turnin’1961Bobby Lewis
            The Battle of New Orleans1959Johnny Horton
            One Sweet Day1995Mariah Carey & Boyz II Men
            Truly Madly Deeply1998Savage Garden
            Silly Love Songs1976Wings

user_5459839 · Answer

You'll need to make sure that selectedIndex never decreases. So when the input is less, add multiples of cellCount until it is not less than selectedIndex and only then make the update.

So change:

let selectedIndex = document.querySelector('#tile').value;

to:

let newSelectedIndex = document.querySelector('#tile').value;
selectedIndex += ((newSelectedIndex - selectedIndex) % cellCount + cellCount) % cellCount;

Rotating carousel in html, javascript issue

1 Answers