Revision history [back]

To create a swiper slider with a filter using JavaScript, you'll need to follow these steps:

1. Import the Swiper library and your data.
2. Create an array of filters and add them to your HTML.
3. Initialize the Swiper slider and set up the filter event listener.
4. Use the event listener to filter the data based on the selected option.
5. Reload the swiper slider after filtering the data.

Here is an example implementation:

HTML:

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- Your slide items here -->
  </div>
</div>

<div class="filter-wrapper">
  <select id="filter-select">
    <option value="all">All</option>
    <option value="category1">Category 1</option>
    <option value="category2">Category 2</option>
    <option value="category3">Category 3</option>
  </select>
</div>

JavaScript:

// Import Swiper and data
import Swiper from 'swiper';
import { data } from "./data.js";

// Initialize Swiper
const swiper = new Swiper('.swiper-container', {
  // Swiper options here
});

// Get filter element and initialize event listener
const filterSelect = document.getElementById('filter-select');
filterSelect.addEventListener('change', () => {
  // Get selected option value
  const selectedValue = filterSelect.value;

  // Filter data based on selected value
  const filteredData = selectedValue === 'all' ? data : data.filter(item => item.category === selectedValue);

  // Clear current swiper slides
  swiper.removeAllSlides();

  // Add filtered data to swiper
  filteredData.forEach(item => {
    swiper.appendSlide(`<div class="swiper-slide">${item.title}</div>`);
  });

  // Update Swiper
  swiper.update();
});

Note: You will need to provide the data array with slide items that have a category property in this example.