Q:

SlickJS slides not working after API call

I have a problem with slickjs.  My app is fetching data from weather API.  ANd i want to put this data into sildes.  Sildes are created by forEach and template string.  Issue is that slickjs requires to apply it's container to parent elemnt that i am inserting my slides and that is ok.  But if slides are created after certain event in my case fetching data by user slickjs doesn't see my slides and do not apply class to them to work.  But if i re-size the page it for browser to parse JS and apply those classes so slider is working.  
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);
})

UI class
 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()

slickjs
$(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
                }
            }

        ]

    });

})

A:

Save your slickSettings in a global var (actually in a var that's available everywhere you need to initialize a slick instance):
$(window).on('load', function() {
  window.slickSettings = {
    autoplay: false,
    ... // <= rest of your slick settings
  };
  $('.forcast').slick(window.slickSettings);
})

... and, in your ajax call, reinitialize slick with same settings:
... {  ...
  document.getElementById('forcast').innerHTML = output;
  $('.forcast').slick(window.slickSettings); // <= add this line
  ...
}

Note: You don't really need to polute window object with that property and your settings may well just live in a separate variable but, since I don't know anything about your system, the one above will surely work.  In general, you want to avoid adding properties to window object and try to limit the scope of your variables to what they need in order to do the job. 

Another option is to trigger resize event on window after you update the html.  Not on .forcast!   resize event does not bubble and should only be placed on window object:

Only handlers registered on the window object will receive events. 

Looking closer at the examples pages, you have slickAdd method:
$('.forcast').slick('slickAdd',output);

... but for this to work output only needs the additional slides. 

It also appears that this also works:
$('.forcast')[0].slick.refresh();

