javascript - 通过滑块激活 javascript

Question

我有几个由 javascript 文件生成的地图。这意味着每个地图都是由单个 javascript 文件生成的。现在我想在我的 html 文件中包含一个滑块，让我在地图中滑动。我使用 Basic jQuery Slider 作为我的滑块的来源。
我的问题是链接的 javascript 文件总是被激活，这导致所有地图同时显示。如何实现同时只有一张地图处于活动状态？
到目前为止我的代码：

  <!--  Outer wrapper for presentation only, this can be anything you like -->
  <div id="banner-fade">

    <!-- start Basic Jquery Slider -->
    <ul class="bjqs">
      <li><script src="js/Map1.js"></script></li>
      <li><script src="js/Map2.js"></script></li>
      <li><script src="js/Map3.js"></script></li>
    </ul>
    <!-- end Basic jQuery Slider -->

  </div>
  <!-- End outer wrapper -->

  <script class="secret-source">
    jQuery(document).ready(function($) {

      $('#banner-fade').bjqs({
        height      : 2000,
        width       : 2000,
        responsive  : true
      });

    });
  </script>

  </div>

每一张地图看起来都像这样：https ://plnkr.co/edit/CwiFnNmfIleo5zZ6BseW?p=preview