Scrolling button doesn't work properly Javascript

Question

I have an html script that functions to display cards in the form of a carousel. But when I press the scrolling button the carousel doesn't work properly and doesn't display an error message on the browser console. Can someone help me solve this problem?

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    
    <div class="container">
      <div class="carousel">
        <div class="carousel-left" onclick="moveCarousel(-1)"></div>
        <div class="carousel-middle">
          <div class="carousel-overflow">
            <div class="carousel-card">
              
            </div>
          </div>
          
          
        </div>
        <div class="carousel-right" onclick="moveCarousel(1)"></div>
      </div>
    </div>
    
    <script type="text/javascript" src="script.js"></script>
    
  </body>
</html>

CSS:

body {
    
    
    min-height: 1000px; 
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 40px;
}
.carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 40px;
    color: #666a73;
    
}
.carousel-middle {
    display: flex;
    justify-content: center;
    width: 640px;
    
}
.carousel-overflow {
    overflow: hidden;
}
.carousel-card {
    display: flex;
    transition: transform 150ms ease-out;
    transform: translatex(0px);
}
.carousel-content,.carsousel-card {
    margin: 0 10px;
    cursor: pointer;
    box-shadow: 0 4px 15px 0 rgba(40, 44, 53, 0.06), 0 2px 2px 0 rgba(40, 44, 53, 0.08);
    background-color: #fff;
    border-radius: 4px;
    z-index: 3;
    margin-bottom: 2px;
}
.carousel-left, .carousel-right {
    display: inline-block;
    width: 15px;
    height: 15px;
    padding: 10px;
    box-sizing: border-box;
    border-top: 2px solid #42b883;
    border-right: 2px solid #42b883;
    cursor: pointer;
    margin: 0 10px;
    transition: transform 150ms linear;
}
.carousel-left {
    transform: rotate(-135deg);
}
.carousel-right {
    transform: rotate(45deg);
}
.carousel-left[disabled],.carousel-right[disabled] {
    border-color: #000;
    opacity: 0.2;
}

JavaScript:

const data = {
    paginationFactor: 200,
    currentOffset: 0,
    windowSize: 3,
    items: [
        {
            name: "Tycoon Thai",
            tag: "Thai"
        },
        {
            name: "Ippudo",
            tag: "Japanese"
        },
        {
            name: "Milano",
            tag: "Pizza"
        },
        {
            name: "Tsing Tao",
            tag: "Chinese"
        },
        {
            name: "Frances",
            tag: "French"
        },
        {
            name: "Burma Superstar",
            tag: "Burmese"
        },
        {
            name: "Salt and Straw",
            tag: "Ice cream"
        }
    ]
}

function atHeadOfList() {
    return data.currentOffset === 0;
}

function atEndOfList() {
    return data.currentOffset <= (data.paginationFactor * -1) * (data.items.length - data.windowSize);
}

function moveCarousel(direction) {
    if (direction === 1 && !atEndOfList()) {
        data.currentOffset -= data.paginationFactor;
    }
    
    if (direction === -1 && !atHeadOfList()) {
        data.currentOffset += data.paginationFactor;
    }
}

let content = document.querySelector(".carousel-card");
content.style.transform = `translateX(${data.currentOffset}px)`;

for (let item of data.items) {
    content.innerHTML += `<div class="carousel-content">
                                <img src="https://placehold.it/200x200">
                                <div class="carousel-footer">
                                    <p>${item.name}</p>
                                    <p>${item.tag}</p>
                                </div>
                            </div>`;
}

Thank you for all your help.

Answer 1

You're setting the transform only once when the code is initially run (this line):

content.style.transform = `translateX(${data.currentOffset}px)`;

You should re-set the transform whenever you call moveCarousel :

function moveCarousel(direction) {
    if (direction === 1 && !atEndOfList()) {
        data.currentOffset -= data.paginationFactor;
    }

    if (direction === -1 && !atHeadOfList()) {
        data.currentOffset += data.paginationFactor;
    }
    content.style.transform = `translateX(${data.currentOffset}px)`;

}

(working example here: https://codepen.io/annaazzam/pen/XWXzVBj?editors=1111 )

Scrolling button doesn't work properly Javascript

Question

1 answers

solution1
1 ACCPTED 2020-07-01 09:12:08

Scrolling button doesn't work properly Javascript

Question

1 answers

solution1 1 ACCPTED 2020-07-01 09:12:08

solution1
1 ACCPTED 2020-07-01 09:12:08