Lite Slider - Filter Demo

Filterable Slider with Pager

How it works

When you click a filter button, the code:

1. Gets the slider's refresh ID from its data-refresh-id attribute
2. Hides/shows slider items based on their data-category attribute
3. Calls refresh(sliderId) to update the pager and positions

Code Example

// Initialize the slider and get the API
const sliderAPI = slider();

// Filter items and refresh
function filterSlider(category) {
  const sliderElement = document.querySelector('.slider');
  const items = sliderElement.querySelectorAll('.slider-item');

  items.forEach(item => {
    if (category === 'all' || item.dataset.category === category) {
      item.classList.remove('hidden');
    } else {
      item.classList.add('hidden');
    }
  });
  // Call refresh to update the pager and scroll positions
  sliderAPI.refresh(sliderId);
}