Javascript 调用API后SlickJS幻灯片不工作

我对

slickjs

有问题。我的应用程序正在从天气API获取数据。我想把这些数据放到sildes中。SILDE由

forEach

和模板字符串创建。问题是，slickjs需要将它的容器应用于父元素，我正在插入幻灯片，这样就可以了。但若幻灯片是在特定事件之后创建的，在我的例子中，用户slickjs获取数据时不会看到我的幻灯片，也不会对它们应用类来工作。但如果我重新调整页面大小，浏览器将解析JS并应用这些类，这样slider就可以工作了

app.js

import { fetchForcast } from './fetch'
import { ui } from './ui'



let btn = document.getElementById('btn')

btn.addEventListener('click', getWeather)

function getWeather() {

    let city = document.getElementById('city').value
    let country = document.getElementById('country').value

    fetchForcast.fetchCall(country, city)
        .then(res => ui.showWeather(res.resData))
        .catch(err => console.log(err));
    fetchForcast.fetchCurrent(country, city)
        .then(res => ui.showCurrent(res.resData))
        .catch(err => console.log(err));

}

$(window).on('load', function() {
    window.slickSettings = {
        autoplay: false,
        autoplaySpeed: 4000,
        slidesToShow: 3,
        slidesToScroll: 3,
        dots: false,
        arrows: false,
        responsive: [{
                breakpoint: 990,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            }, {
                breakpoint: 550,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }

        ]
    };
    $('.forcast').slick(window.slickSettings);
})

 class UI {
     showCurrent(weather) {
         let rain = weather.weather[0].main

         if (rain === "Rain") {
             document.body.style.background = "url('https://images.pexels.com/photos/459451/pexels-photo-459451.jpeg?cs=srgb&dl=black-and-white-clear-cool-459451.jpg&fm=jpg')";
         }
         let output = ''
         output += `

         <div class="current__weather-box">
         <h5 class="city">${weather.name}</h5>
         <span class="country">${weather.sys.country}</span>
         <span class="desc">${weather.weather[0].description}</span>
         <ul>
             <li><span>humidity:</span><span>${weather.main.humidity}%</span></li>
             <li><span>temperature:</span><span>${weather.main.pressure}</span></li>
             <li><span>temperature:</span><span>${weather.main.temp}</span></li>
             <li><span>max:</span><span></span>${weather.main.temp_max}</li>
             <li><span>min:</span><span></span>${weather.main.temp_min}</li>

         </ul>
     </div>

              `
         document.getElementById('current-weather').innerHTML = output
     }
     showWeather(weather) {

         let output = ''

         let forcasts = weather.list.slice(1, 5)
         forcasts.forEach(forcast => {
             output += `
             <div class="forcast__box">
             <span>${forcast.dt_txt}</span>
             <ul>
             <li>${forcast.weather[0].description}</li>
                 <li>${forcast.main.humidity}</li>
                 <li>${forcast.main.pressure}</li>
                 <li>${forcast.main.temp}</li>
                 <li>${forcast.main.humidity}</li>
             </ul>
         </div> `
         })
         document.getElementById('forcast').innerHTML = output;
         $('.forcast').slick('resize');
     }
 }

 export const ui = new UI()

$(document).ready(function() {

    $('.forcast').slick({
        autoplay: false,
        autoplaySpeed: 4000,
        slidesToShow: 3,
        slidesToScroll: 3,
        dots: false,
        arrows: false,
        responsive: [{
                breakpoint: 990,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            }, {
                breakpoint: 550,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }

        ]

    });

})

UI类

import { fetchForcast } from './fetch'
import { ui } from './ui'



let btn = document.getElementById('btn')

btn.addEventListener('click', getWeather)

function getWeather() {

    let city = document.getElementById('city').value
    let country = document.getElementById('country').value

    fetchForcast.fetchCall(country, city)
        .then(res => ui.showWeather(res.resData))
        .catch(err => console.log(err));
    fetchForcast.fetchCurrent(country, city)
        .then(res => ui.showCurrent(res.resData))
        .catch(err => console.log(err));

}

$(window).on('load', function() {
    window.slickSettings = {
        autoplay: false,
        autoplaySpeed: 4000,
        slidesToShow: 3,
        slidesToScroll: 3,
        dots: false,
        arrows: false,
        responsive: [{
                breakpoint: 990,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            }, {
                breakpoint: 550,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }

        ]
    };
    $('.forcast').slick(window.slickSettings);
})

 class UI {
     showCurrent(weather) {
         let rain = weather.weather[0].main

         if (rain === "Rain") {
             document.body.style.background = "url('https://images.pexels.com/photos/459451/pexels-photo-459451.jpeg?cs=srgb&dl=black-and-white-clear-cool-459451.jpg&fm=jpg')";
         }
         let output = ''
         output += `

         <div class="current__weather-box">
         <h5 class="city">${weather.name}</h5>
         <span class="country">${weather.sys.country}</span>
         <span class="desc">${weather.weather[0].description}</span>
         <ul>
             <li><span>humidity:</span><span>${weather.main.humidity}%</span></li>
             <li><span>temperature:</span><span>${weather.main.pressure}</span></li>
             <li><span>temperature:</span><span>${weather.main.temp}</span></li>
             <li><span>max:</span><span></span>${weather.main.temp_max}</li>
             <li><span>min:</span><span></span>${weather.main.temp_min}</li>

         </ul>
     </div>

              `
         document.getElementById('current-weather').innerHTML = output
     }
     showWeather(weather) {

         let output = ''

         let forcasts = weather.list.slice(1, 5)
         forcasts.forEach(forcast => {
             output += `
             <div class="forcast__box">
             <span>${forcast.dt_txt}</span>
             <ul>
             <li>${forcast.weather[0].description}</li>
                 <li>${forcast.main.humidity}</li>
                 <li>${forcast.main.pressure}</li>
                 <li>${forcast.main.temp}</li>
                 <li>${forcast.main.humidity}</li>
             </ul>
         </div> `
         })
         document.getElementById('forcast').innerHTML = output;
         $('.forcast').slick('resize');
     }
 }

 export const ui = new UI()

$(document).ready(function() {

    $('.forcast').slick({
        autoplay: false,
        autoplaySpeed: 4000,
        slidesToShow: 3,
        slidesToScroll: 3,
        dots: false,
        arrows: false,
        responsive: [{
                breakpoint: 990,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            }, {
                breakpoint: 550,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }

        ]

    });

})

---

将您的slick设置保存在全局变量中（实际上，在您需要初始化slick实例的任何地方都可以使用的变量中）：

。。。但要使其正常工作，输出只需要附加幻灯片

---

这似乎也适用于：

$('.forcast')[0].slick.refresh();

---

您可以在将标记插入DOM后手动触发resize事件，以强制slick重新调整它

  $('.forcast').slick('resize');

或者只是等待初始化slick.js，直到DOM创建完成。

---

现在，您可以在

$（document）.ready（）

上初始化slick，这是在ajax调用完成之前调用的。

请阅读。不工作，添加了更多有问题的代码请查看。我根据发现的添加了更多选项。再过一个小时左右我就看不到这个了。希望你能用额外的方法解决它。