javascript - 添加第 17 个 Mapbox 地图后，Slick 幻灯片失败

Question

我正在制作一个带有光滑滑块的页面，该滑块可以在 Mapbox 的地图之间滑动。代码有效，但在我添加第 17 个地图后，第一个不再显示（如果第 18 个添加了第 1-2 个不显示......）。我似乎无法在他们的网站上找到免费帐户的限制。是否有限制或有人知道解决方法吗？我无法在 JavaScript 中添加循环，因为“容器：”仍然添加了第 17 个并且不显示第 1 个。

    mapboxgl.accessToken = '...';

    var mapAustria = new mapboxgl.Map({
        container: 'mapAustria', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [14.763850, 47.222536], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var mapAustria2 = new mapboxgl.Map({
        container: 'mapAustria2', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [14.763850, 47.222536], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var mapHungary = new mapboxgl.Map({
        container: 'mapHungary', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [19.251680, 47.581940], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var mapEngland = new mapboxgl.Map({
        container: 'mapEngland', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [-1.010697, 52.071675], // starting position [lng, lat]
        zoom: 13.3 // starting zoom
    });

    var mapEngland2 = new mapboxgl.Map({
        container: 'mapEngland2', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [-1.010697, 52.071675], // starting position [lng, lat]
        zoom: 13.3 // starting zoom
    });

    var mapSpain = new mapboxgl.Map({
        container: 'mapSpain', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [2.257649, 41.568925], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var mapBelgium = new mapboxgl.Map({
        container: 'mapBelgium', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [5.970996, 50.440195], // starting position [lng, lat]
        zoom: 13.3 // starting zoom
    });

    var mapMonza = new mapboxgl.Map({
        container: 'mapMonza', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [9.289711, 45.621617], // starting position [lng, lat]
        zoom: 13 // starting zoom
    });

    var mapMugello = new mapboxgl.Map({
        container: 'mapMugello', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [11.371805, 43.997830], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var MapRussia = new mapboxgl.Map({
        container: 'MapRussia', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [39.967059, 43.408882], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var MapGermany = new mapboxgl.Map({
        container: 'MapGermany', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [6.940758, 50.333245], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var mapPortugal = new mapboxgl.Map({
        container: 'mapPortugal', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [-8.627975, 37.231833], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var mapImola = new mapboxgl.Map({
        container: 'mapImola', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [11.710237, 44.340919], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var mapTurkey = new mapboxgl.Map({
        container: 'mapTurkey', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [29.410273, 40.956887], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var mapBahrain = new mapboxgl.Map({
        container: 'mapBahrain', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [50.513280, 26.029234], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var mapBahrain2 = new mapboxgl.Map({
        container: 'mapBahrain2', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [50.513280, 26.029234], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });
    /* if added doesn't work 
    var mapAbuDhabi = new mapboxgl.Map({
        container: 'mapAbuDhabi', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [54.611141, 24.471118], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });
    */

标签： javascripthtmlcssmapboxslick.js