title: Activating javascript by slider
body: <p>I have several maps that are generated by javascript files. That means that each map is generated by a single javascript file. Now I want to include a slider into my html file that lets me slide through the maps. I am using Basic jQuery Slider as the source of my slider.  <br>
  My problem is that the linked javascript files are always activated which results in all of the maps being displayed at the same time. How can I achieve that there is only one map active at the same time?<br>
  My code so far:         </p>
  
  <pre><code>  &lt;!--  Outer wrapper for presentation only, this can be anything you like --&gt;
    &lt;div id="banner-fade"&gt;
  
      &lt;!-- start Basic Jquery Slider --&gt;
      &lt;ul class="bjqs"&gt;
        &lt;li&gt;&lt;script src="js/Map1.js"&gt;&lt;/script&gt;&lt;/li&gt;
        &lt;li&gt;&lt;script src="js/Map2.js"&gt;&lt;/script&gt;&lt;/li&gt;
        &lt;li&gt;&lt;script src="js/Map3.js"&gt;&lt;/script&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;!-- end Basic jQuery Slider --&gt;
  
    &lt;/div&gt;
    &lt;!-- End outer wrapper --&gt;
  
    &lt;script class="secret-source"&gt;
      jQuery(document).ready(function($) {
  
        $('#banner-fade').bjqs({
          height      : 2000,
          width       : 2000,
          responsive  : true
        });
  
      });
    &lt;/script&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>Each one of the maps looks something like this: <a href="https://plnkr.co/edit/CwiFnNmfIleo5zZ6BseW?p=preview" rel="nofollow">https://plnkr.co/edit/CwiFnNmfIleo5zZ6BseW?p=preview</a></p>