Repeater Navigation Buttons - Wix Studio

Ask the community
, ,
1

Hello,

I am using the below code to work the repeater displayed as slider with navigation buttons in Wix Studio

The used elements listed below

In Wix Studio, I have below elements

  1. Data collection ‘ShopPrintingPatterns’
  2. Repeater displaying as slider ‘shopRepeater’
  3. I depend on the items inside the repeater to move the repeater ‘repeaterItem’
  4. Dataset connecting this repeater to the data collection ‘printingPatternsDataset’
  5. Next Button ‘nextButton’
  6. Previous Button ‘previousButton’

and i have the following issues
a. Calculate the item width dynamically to make it works well on all devices
b. Stop the repeater items at the end of the webpage as it continue moving when I click on next and will not stop.
C. The mouse scrolling is not working well whenever i use the buttons to navigate the repeater.

import { timeline } from 'wix-animations-frontend';

// Initialize variables
let currentIndex = 0;
let totalItems = 7;
const itemWidth = 350; // Assuming each repeater item is 350px wide

$w.onReady(function () {
  // Get the total number of items in the data collection
  $w("#printingPatternsDataset").onReady(() => {
    totalItems = $w("#printingPatternsDataset").getTotalCount();
  });

  // Set up event listeners for the buttons
  $w("#nextButton").onClick(() => moveToNext());
  $w("#previousButton").onClick(() => moveToPrevious());
});

function moveToNext() {
  // Move to the next item if not at the last item
  if (currentIndex < totalItems - 1) {
    currentIndex++;
    scrollRepeater();
  }
}

function moveToPrevious() {
  // Move to the previous item if not at the first item
  if (currentIndex > 0) {
    currentIndex--;
    scrollRepeater();
  }
}

function scrollRepeater() {
  // Calculate the new scroll position
  const newScrollLeft = currentIndex * itemWidth;

  // Create a timeline animation for scrolling
  const scrollTimeline = timeline()
    .add($w("#repeaterItem"), {
      x: -newScrollLeft,
      duration: 500, // Adjust duration as needed
      easing: "easeOutQuad"
    });

  scrollTimeline.play();
}

If there anyone can help to modify this code