Swiper not working in leaflet bindPopup #7411

haifeng-zhang · 2024-03-23T17:39:55Z

haifeng-zhang
Mar 23, 2024

Hey, guys! I used the following code from ChatGPT to add swiper UI within the Popup (e.g., marker.bindPopup). It does show the elements, but does not allow me to navigate (after click on the swiper button). Did I miss anything? Thanks!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Leaflet Popup Slider</title>
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>
    #map {
      height: 400px;
    }
  </style>
</head>
<body>

<div id="map"></div>

<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- Optional: if you're using jQuery for easier DOM manipulation -->
<script src="app.js"></script>
</body>
</html>

app.js

// Initialize Leaflet map
const map = L.map('map').setView([51.505, -0.09], 13);

// Add OpenStreetMap tile layer to the map
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

// Create a marker at a specific location
const marker = L.marker([51.5, -0.09]).addTo(map);

// Create a popup with a slider
const popupContent = `
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="image1.jpg"></div>
      <div class="swiper-slide"><img src="image2.jpg"></div>
      <div class="swiper-slide"><img src="image3.jpg"></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
`;

marker.bindPopup(popupContent);

// Initialize Swiper
const swiper = new Swiper('.swiper-container', {
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

haifeng-zhang · 2024-03-23T17:46:17Z

haifeng-zhang
Mar 23, 2024
Author

It is working now. I had to do the following:

marker.bindPopup(popupContent);
marker.bindPopup(popupContent).openPopup();

1 reply

Xiangzi529 Jan 10, 2025

你有试过在popup中启用mousewhell吗

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Swiper not working in leaflet bindPopup #7411

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Swiper not working in leaflet bindPopup #7411

haifeng-zhang Mar 23, 2024

Replies: 1 comment · 1 reply

haifeng-zhang Mar 23, 2024 Author

Xiangzi529 Jan 10, 2025

haifeng-zhang
Mar 23, 2024

Replies: 1 comment 1 reply

haifeng-zhang
Mar 23, 2024
Author