Breaking News: Grepper is joining You.com. Read the official announcement!

fix scroll from first to last and from last to first

Orc Luster answered on June 19, 2023 Popularity 1/10 Helpfulness 1/10

answer fix scroll from first to last and from last to first

fix scroll from first to last and from last to first

Comment

// Step 4: Write JavaScript logic

// 4a. Query the DOM
const carouselContainer = document.querySelector('.carousel-container');
const prevButton = document.querySelector('#prev-button');
const nextButton = document.querySelector('#next-button');

// 4b. Initialize variables
let currentIndex = 0;
const carouselItems = carouselContainer.querySelectorAll('.carousel-item');
const totalItems = carouselItems.length;
const itemWidth = carouselItems[0].offsetWidth;

// 4c. Attach event listeners
prevButton.addEventListener('click', () => navigateCarousel('prev'));
nextButton.addEventListener('click', () => navigateCarousel('next'));

// 4d. Handle navigation
function navigateCarousel(direction) {
  // 4d i. Update current index based on button clicked
  if (direction === 'next') {
    currentIndex = (currentIndex + 1) % totalItems;
  } else if (direction === 'prev') {
    currentIndex = (currentIndex - 1 + totalItems) % totalItems;
  }

  // 4d iii. Update carousel container's scroll position
  const scrollLeftValue = currentIndex * itemWidth;
  const containerScrollWidth = carouselContainer.scrollWidth;
  const containerWidth = carouselContainer.offsetWidth;

  // Check if the target item is outside the visible container
  if (scrollLeftValue + containerWidth > containerScrollWidth) {
    carouselContainer.scrollTo({
      left: containerScrollWidth - containerWidth,
      behavior: 'smooth',
    });
  } else if (scrollLeftValue < carouselContainer.scrollLeft) {
    carouselContainer.scrollTo({
      left: scrollLeftValue,
      behavior: 'smooth',
    });
  }
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: javascript scroll

Link to this answer
Share Copy Link

Contributed on Jun 19 2023

Orc Luster

0 Answers Avg Quality 2/10

fix scroll from first to last and from last to first

Contents

More Related Answers

fix scroll from first to last and from last to first

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.